Oi Mylena, tudo bem?
Sinto muito pela demora em obter um retorno.
Testei o seu código e por aqui nenhum produto foi adicionado ao carrinho. Acredito que isso esteja acontecendo pois o componente Produtos (index.jsx)
não foi configurado corretamente com as funções para manipular os produtos, bem como não está recebendo o setCarrinho
vindo do contexto CarrinhoContext
, fazendo com que não seja possível manipulá-lo.
Para corrigir, você deve ir até components > Produtos > index.js
e adicionar o contexto e as funções de manipular produtos. O código desse arquivo deve ficar assim:
import React, { useContext } from "react";
import Produto from "./Produto";
import produtos from "@/mocks/produtos.json";
import Titulo from "@/components/Titulo";
import { CarrinhoContext } from "@/context/CarrinhoContext";
const Produtos = () => {
const { carrinho, setCarrinho } = useContext(CarrinhoContext);
function adicionarProduto(novoProduto) {
const temOProduto = carrinho.some((itemDoCarrinho) => {
itemDoCarrinho.id === novoProduto.id;
});
if (!temOProduto) {
novoProduto.quantidade = 1;
return setCarrinho((carrinhoAnterior) => [
...carrinhoAnterior,
novoProduto,
]);
}
setCarrinho((carrinhoAnterior) =>
carrinhoAnterior.map((itemDoCarrinho) => {
if (itemDoCarrinho.id === novoProduto.id)
itemDoCarrinho.quantidade += 1;
return itemDoCarrinho;
})
);
}
return (
<section role="produtos" aria-label="Produtos que estão bombando!">
<Titulo>Produtos que estão bombando!</Titulo>
<div className="container row mx-auto">
{produtos.map((produto) => (
<Produto
key={produto.id}
{...produto}
adicionarProduto={adicionarProduto}
/>
))}
</div>
</section>
);
};
export default Produtos;
Feito isso, já é possível adicionar um produto ao carrinho.
Espero ter ajudado. Conte com o apoio do fórum!
Abraços e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓