Couldn't figure out a better way to word the problem i have, sorry if this gets asked often.
Code is like this:
const [isFlipped, setFlipped] = useState(false);
const flip = () => {
if (!isFlipped) {
setFlipped(true);
} else {
setFlipped(false);
}
};
return(
data.map((product) => (
<div
onClick={()=> flip()}
animate={isFlipped && { rotateY: 180 }}
>
<p>{product.name}</p>
<p>{product.info}</p>
</div>
));
)
i want the flip() function to work only on the div that gets clicked, however currently it affects every mapped div.
Edit (After seeing the flip function): You should make this a seperate component so each child has it's own isFlipped State. And then map and create the components with the product as a prop.
Add a key to the div in the map to add uniqueness.
data.map((product, key) => (
<div key={key} onClick={()=> flip()}>
<p>{product.name}</p>
<p>{product.info}</p>
</div>
));