Creé un componente de tarjeta y cuando paso el mouse sobre la tarjeta seleccionada, todas las tarjetas giran. Sé que tiene que ver con usar un estado para todas las tarjetas, pero soy nuevo en reaccionar y no puedo entender cómo resolver el problema.
const [isFlipped, setIsFlipped] = useState(false); return ( <> {teams.map((team) => ( <div className={styles.about_us_card} key={team.id} onMouseEnter={setIsFlipped(!isFlipped)} > <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal"> <div className={styles.about_us_profile_image}> <img src="/placeholder.jpeg" alt="profile" /> </div> <div className={styles.about_us_profile_info} onMouseLeave={handleFlip} > <div className={styles.about_us_profile_name}> <p className={styles.profile_name}>{team.name}</p> <p className={styles.profile_job_title}>{team.title}</p> </div> <div className={styles.about_us_profile_text}> <p>{team.about}</p> </div> </div> </ReactCardFlip> </div> ))} </> ); }Gracias por cualquier ayuda
Puedes hacerlo
const [flipped, setFlipped] = useState(false); return ( <> {teams.map((team) => ( <div className={styles.about_us_card} key={team.id} onMouseEnter={() => setFlipped(team.id)} > <ReactCardFlip isFlipped={flipped === team.id} flipDirection="horizontal"> <div className={styles.about_us_profile_image}> <img src="/placeholder.jpeg" alt="profile" /> </div> <div className={styles.about_us_profile_info} onMouseLeave={handleFlip} > <div className={styles.about_us_profile_name}> <p className={styles.profile_name}>{team.name}</p> <p className={styles.profile_job_title}>{team.title}</p> </div> <div className={styles.about_us_profile_text}> <p>{team.about}</p> </div> </div> </ReactCardFlip> </div> ))} </> ); }Movería todo dentro del mapa a otro componente como este. De esta manera, puede pasar team con props y mantener el state dentro del componente sin verificar la identificación o algo así
tu componente
return ( <> {teams.map((team) => ( <NewComponent team={team} /> ))} </> ); }Nuevo componente
const NewComponent = ({team}) => { const [isFlipped, setIsFlipped] = useState(false); return ( <> {teams.map((team) => ( <div className={styles.about_us_card} key={team.id} onMouseEnter={setIsFlipped(!isFlipped)} > <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal"> <div className={styles.about_us_profile_image}> <img src="/placeholder.jpeg" alt="profile" /> </div> <div className={styles.about_us_profile_info} onMouseLeave={handleFlip} > <div className={styles.about_us_profile_name}> <p className={styles.profile_name}>{team.name}</p> <p className={styles.profile_job_title}>{team.title}</p> </div> <div className={styles.about_us_profile_text}> <p>{team.about}</p> </div> </div> </ReactCardFlip> </div> ))} </> }