I have made a card component and when I hover over the selected card, all cards rotate. I know it has to do with using one state for all the cards but I am new to react and can't understand how to solve the issue.
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>
))}
</>
);
}
Thanks for any help
you can do this
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>
))}
</>
);
}
I would move everything inside the map into another component like this. In this way you can pass team with props and keep state inside the component without checking id or something
Your component
return (
<>
{teams.map((team) => (
<NewComponent team={team} />
))}
</>
);
}
NewComponent
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>
))}
</>
}