He visto preguntas similares, pero ninguna de las respuestas funciona en mi caso y espero que alguien pueda decirme por qué.
Mi ReactApp renderiza 3 componentes de tarjeta que giran cuando se hace clic en ellos. Las tarjetas se rellenan con datos de una matriz de objetos y se representan con una función de mapa (información agregada en caso de que tenga un impacto). Aquí está el componente principal.
import React from 'react' import FlipCard from './FlipCard' const cards = [ { id: 1, text: 'NOPE', }, { id: 2, text: '!!WINNER!!', }, { id: 3, text: 'NOPE', }, ] const shuffleCards = array => { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)) const temp = array[i] array[i] = array[j] array[j] = temp } return array } shuffleCards(cards) console.log(cards) const CardGameUI = () => { shuffleCards(cards) return ( <div className="cards-ui"> {cards.map(card => ( <FlipCard key={card.id} text={card.text} value={card.id} /> ))} </div> ) } export default CardGameUICuando se voltea una de las tarjetas, necesito el onClick para deshabilitar las otras tarjetas. Intenté usar el estado y un condicional en mi evento onClick pero no tuvo efecto. De acuerdo con console.log, el estado del booleano de reproducción cambia y si cambio manualmente el condicional en el evento onCLick verifico si la reproducción es verdadera, entonces funciona perfectamente bien. Claramente me estoy perdiendo algo porque parece que el condicional está funcionando y el estado está cambiando.
import React, { useState } from 'react' import ReactCardFlip from 'react-card-flip' import FrontComponent from './FrontComponent' import BackComponent from './BackComponent' const FlipCard = ({ text, value }) => { const [isFlipped, setIsFlipped] = useState(false) const [activeCard, setActiveCard] = useState(2) const [play, setPlay] = useState(false) console.log(play.valueOf()) function handleFlip() { setPlay(true) setIsFlipped(!isFlipped) console.log(isFlipped) setActiveCard(value) console.log(value) } if (activeCard !== 2) { console.log('Play again?') } return ( <> <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal"> <FrontComponent onClick={!play ? handleFlip : null} /> <BackComponent text={text} value={value} /> </ReactCardFlip> </> ) } export default FlipCard¿Qué me estoy perdiendo?
Debe administrar el evento onClick y el estado de flip en el padre en lugar de dentro de la tarjeta.
Una descripción general de alto nivel será:
const CardGameUI = () => { const [flipped, setFlipped] = useState({}); const hasFlipped = Object.values(flipped).includes(true); const handleFlip = id => () => setFlipped(flipped => ({ ...flipped, [id]: true // can be changed to toggle in case you need it in the future })); return ( <div> {cards.map(({ id, text }) => ( <FlipCard key={id} text={text} value={id} onFlip={handleFlip(id)} flipped={flipped[id]} disabled={hasFlipped} /> ))} </div> ) }; const FlipCard = ({ text, value, onFlip, flipped , disabled}) => { return ( <ReactCardFlip isFlipped={flipped} flipDirection="horizontal"> <FrontComponent onClick={onFlip} disabled={disabled} /> <BackComponent text={text} value={value} /> </ReactCardFlip> ) }