1
resposta

função onClick nao funciona no icone de corção

minha aplicação nao esta funcionando o onClick no favoritos.


import styles from './Card.module.css'
import favoriteIcon from './favorite.png'
import { useFavoriteContext } from '../../contexts/Favorites'
import unFavoriteIcon from './unfavorite.png'

function Card({id, title, cover}){
    const {favorite, addFavorite} = useFavoriteContext();
    const isFavorite = favorite.filter((fav)=> fav.id === id);
    const icon = isFavorite ? favoriteIcon : unFavoriteIcon;
    return(
<div className={styles.container}>
<img src={cover} alt={title} className={styles.cover} />
<h2>{title}</h2>
<img src={icon} alt='Favorite film' className={styles.favorite} 
onClick={()=>{addFavorite(id, title, cover)}}/>
</div>
    )
}

export default Card
1 resposta

Olá Andressa, tudo bem?

Parece que o problema está na maneira como você está verificando se o filme é favorito ou não. O método filter retorna um array, não um valor booleano. Portanto, você precisa verificar o comprimento do array retornado pelo filter para determinar se o filme é favorito ou não. Além disso, você pode usar a negação ! para inverter o resultado, assim você não precisa criar uma variável extra icon. Aqui está uma versão corrigida do seu código:

import styles from './Card.module.css'
import favoriteIcon from './favorite.png'
import { useFavoriteContext } from '../../contexts/Favorites'
import unFavoriteIcon from './unfavorite.png'

function Card({id, title, cover}){
    const {favorite, addFavorite} = useFavoriteContext();
    const isFavorite = favorite.some((fav) => fav.id === id); // Verifica se existe algum favorito com o mesmo ID
    return(
        <div className={styles.container}>
            <img src={cover} alt={title} className={styles.cover} />
            <h2>{title}</h2>
            <img 
                src={isFavorite ? favoriteIcon : unFavoriteIcon} 
                alt='Favorite film' 
                className={styles.favorite} 
                onClick={() => addFavorite(id, title, cover)}
            />
        </div>
    );
}

export default Card;

Nesta versão, isFavorite será true se houver pelo menos um item no array favorite com o mesmo ID do filme atual. Assim, o ícone de favorito será exibido corretamente com base no estado de favorito do filme.