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;