1
resposta

problemas ao desfavoritar e favorita

consigo favoritar somente um card, ao tentar favoritar outro o anterior é desfavoritado e um novo é adicionado

Favoritos.js

import { createContext, useContext, useState } from "react";

export const FavoritosContext = createContext();

FavoritosContext.displayName = "Favoritos";

export default function FavoritosProvider({children}){
    const[favorito, setFavorito] = useState([]);

    return (
        <FavoritosContext.Provider value={{favorito, setFavorito}} >
            {children}
        </FavoritosContext.Provider>
    )
}

export const useFavoritoContext = () => {
    const { favorito, setFavorito } = useContext(FavoritosContext);

    const adicionarFavorito = (novoFavorito) => {
        const favoritoRepetido = favorito.some(favorito => favorito.id === novoFavorito.id);

        let novaLista = [...favorito];
        if (!favoritoRepetido) {
            novaLista.push(novoFavorito);
            return setFavorito(novaLista)
        }
        return setFavorito(novaLista.filter(favorito => favorito.id !== novoFavorito.id));
    }

    return {
        favorito, adicionarFavorito
    };
}

card:

import styles from './card.module.css';
import iconeFavoritar from './assets/favoritar.png';
import iconeDesfavoritar from './assets/desfavoritar.png';
import { useFavoritoContext } from 'contextos/Favoritos';

const Card = ({id, titulo, capa}) => {
    const {favorito, adicionarFavorito} = useFavoritoContext();
    const ehFavorito = favorito.some((fav) => fav.id === id);
    const icone = !ehFavorito ? iconeFavoritar : iconeDesfavoritar;

    return(
        <div className={styles.card}>
            <img src={capa} alt={titulo} className={styles.capa}/>
            <h2>{titulo}</h2>
            <img src={icone} 
            alt="Favoritar filme." 
            className={styles.favoritar}
            onClick={() => { 
                adicionarFavorito([{ id, titulo, capa }])
            }}/> 
        </div>
    )
}

export default Card;
1 resposta

Sua função adicionarFavorito espera um objeto e você está passando uma lista para ela.

onClick={() => { adicionarFavorito( [ { id, titulo, capa } ] ) }}

Para corrigir o erro, basta remover os [] da chamada da função.

onClick={() => { 
    adicionarFavorito({ id, titulo, capa })
}}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software