1
resposta

As subcategorias não são renderizadas

As subcategorias não aparecem no projeto e eu já revi as aulas e acho que o código tá igual, alguém sabe resolver?

Categoria:

import React, { useEffect, useState } from "react";
import "../assets/css/blog.css";
import ListaCategorias from "../components/ListaCategorias";
import ListaPost from "./../components/ListaPost";
import {
    Link,
    Route,
    useParams,
    useRouteMatch,
    Switch,
} from "react-router-dom";
import { busca } from "../api/api";
import SubCategoria from "./SubCategoria";

const Categoria = () => {
    const { id } = useParams();
    const { url, path } = useRouteMatch();
    const [subcategorias, setSubCategorias] = useState([]);

    useEffect(() => {
        busca(`/categorias/${id}`, (categoria) => {
            setSubCategorias(categoria.subcategorias);
        });
    }, [id]);

    return (
        <>
            <div className="container">
                <h2 className="titulo-pagina">Pet Notícias</h2>
            </div>

            <ListaCategorias />
            <ul className="lista-categorias container flex">
                {subcategorias.map((subcategoria) => {
                    <li
                        className={`lista-categorias__categoria lista-categorias__categoria--${id}`}
                        key={subcategoria}
                    >
                        <Link to={`${url}/${subcategoria}`}>
                            {subcategoria}
                        </Link>
                    </li>;
                })}
            </ul>
            <Switch>
                <Route exact path={`${path}/`}>
                    <ListaPost url={`/posts?categoria=${id}`} />
                </Route>
                <Route path={`${path}/:subcategoria`}>
                    <SubCategoria />
                </Route>
            </Switch>
        </>
    );
};

export default Categoria;

Subcategoria:

import React from "react";
import { useParams } from "react-router-dom";
import ListaPost from "../components/ListaPost";

const SubCategoria = () => {
    const { subcategoria } = useParams();

    return <ListaPost url={`/posts?subcategoria=${subcategoria}`} />;
};

export default SubCategoria;
1 resposta

Olá Gustavo

{subcategorias.map((subcategoria) => { <li className={`lista-categorias__categoria lista-categorias__categoria--${id}`} key={subcategoria} > <Link to={`${url}/${subcategoria}`}> {subcategoria} </Link> </li>; })}

Esse trecho do código está faltando trocar {} por () toda renderização de codigo html no jsx tem que ser dentro do bloco ()

subcategorias.map((subcategoria) => (.... html aqui ....))