No pude encontrar una mejor manera de expresar el problema que tengo, lo siento si esto se pregunta a menudo.
El código es así:
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> )); ) Quiero que la función flip() funcione solo en el div en el que se hace clic, sin embargo, actualmente afecta a todos los div asignados.
Editar (después de ver la función flip): debe hacer de este un componente separado para que cada niño tenga su propio estado isFlipped. Y luego asigne y cree los componentes con el producto como accesorio.
Agregue una clave al div en el mapa para agregar unicidad.
data.map((product, key) => ( <div key={key} onClick={()=> flip()}> <p>{product.name}</p> <p>{product.info}</p> </div> ));