Estoy tratando de darle la vuelta a las cartas en este juego, pero no puedo. Traté de hacer algunas cosas manipulando el estado, pero fue en vano. Lo que quiero hacer es: Cuando hago clic en el botón que está en el componente Encabezado, todas las tarjetas deben dar la vuelta. ¿Cómo puedo hacer esto?

Código:

 import { imagesUrl } from "../../constants/urls" import useRequestData from "../../hooks/useRequestData" import { Card, Container, Footer } from "./styledTarotCard" const TarotCard = () => { const getTarot = useRequestData([], "tarot.json") const renderCard = getTarot?.cards?.map((card) => { return ( <Card key={card.name}> <img src={`${imagesUrl}${card.image}`} alt={"Imagem da Carta"} /> <Footer> <p>{card.name}</p> </Footer> </Card> ) }) return ( <Container> {renderCard} </Container> ) } export default TarotCard

Demostración: http://muddled-shirt.surge.sh/