const [movies, setMovies] = useState([ { id: "1", title: "Oceans 8", category: "Comedy", likes: 4, dislikes: 1 }, { id: "2", title: "Midnight Sun", category: "Comedy", likes: 2, dislikes: 0 }, { id: "3", title: "Les indestructibles 2", category: "Animation", likes: 3, dislikes: 1 } ]); const [active, setActive] = useState(false); const toggleActive = index => { setActive(!active); }; return ( <div className="containe"> {movies.map((movieDetails, index) => { // console.log(index) return ( <div className="card"> <div className="card-body"> <button className="btn-fermer" onClick={() => removeItem(index)}> Close </button> <h6 className="card-id" key={movieDetails.id + index}> ID:{movieDetails.id} </h6> <p className="card-title"> <strong>{movieDetails.title}</strong> </p> <p className="card-category">Catégorie: {movieDetails.category}</p> <p className="card-like active"> {" "} Like count :{movieDetails.likes} </p> <p className="card-dislike active"> {" "} Like count :{movieDetails.dislikes} </p> </div> <button className="card-button" onClick={() => toggleActive(index)}> Toggle Likes and Dislikes </button> </div> ); })} </div> );Probar esto:
Simplemente coloque la llave en el accesorio className y pásele una expresión ternay para alternar entre las dos clases que desea según el estado activo así:
const [active, setActive] = useState(false); const toggleActive = () => setActive(prevState => !prevState); return ( <div className="containe"> {movies.map((movieDetails, index) => { // console.log(index) return ( <div className="card"> <div className="card-body"> <button className="btn-fermer" onClick={() => removeItem(index)}> Close </button> <h6 className="card-id" key={movieDetails.id + index}> ID:{movieDetails.id} </h6> <p className="card-title"> <strong>{movieDetails.title}</strong> </p> <p className="card-category">Catégorie: {movieDetails.category}</p> <p className={active ? "card-dislike active":"card-like active"}> Like count :{movieDetails.likes} </p> <p className={active ? "card-like active":"card-dislike active"}> Like count :{movieDetails.dislikes} </p> </div> <button className="card-button" onClick={toggleActive}> Toggle Likes and Dislikes </button> </div> ); })} </div> );