Actualmente tengo una función de mapa que representa una serie de imágenes y me di cuenta de que comparten el mismo estado de hover , lo que significa que realizarán la misma acción cuando se desplacen. ¿Existe alguna práctica estándar para mapear componentes duplicados mientras se les asignan propiedades únicas/individuales?
{itemData.map((item) => ( <ImageListItem key={item.img}> <img src={item.img} alt={item.title} loading="lazy" onMouseOver={() => {setHover(true)}} onMouseOut={() => {setHover(false)}} style={{ transform: hover ? 'scale(1.5, 1.5)' : null }} /> <ImageListItemBar title={item.title} subtitle={item.author} actionIcon={ <IconButton sx={{ color: 'rgba(255, 255, 255, 0.54)' }} aria-label={`info about ${item.title}`} > <InfoIcon /> </IconButton> } />Para proporcionar propiedades únicas, debe tener algo que identifique de forma única su componente de imagen y usarlo para administrar su estado. En su caso, su estado hover debe ser una array o un object , no un boolean . Dado que está utilizando item.img como clave, asumo que es único y, por lo tanto, puede ayudarlo en la administración de su estado de esta manera:
const [hover, setHover] = useState({}); {itemData.map((item) => ( <ImageListItem key={item.img}> <img src={item.img} alt={item.title} loading="lazy" onMouseOver={() => setHover({...hover, [item.img]: true})} onMouseOut={() => setHover({...hover, [item.img]: false})} style={{ transform: hover ? 'scale(1.5, 1.5)' : null }} /> <ImageListItemBar title={item.title} subtitle={item.author} actionIcon={ <IconButton sx={{ color: 'rgba(255, 255, 255, 0.54)' }} aria-label={`info about ${item.title}`} > <InfoIcon /> </IconButton> } /> )) }Debe usar un componente, que crea un estado único para cada elemento, escribí un ejemplo fácil de entender.
import React, { useState } from "react" const items = [ { title: 'Card1', price: 100 }, { title: 'Card2', price: 50 }, { title: 'Card3', price: 200 }, ] export default function App() { return ( <> { items.map(element => { return( <Card {...element}/> ) }) } </> ) } function Card({title, price, key}) { const [isHovered, setHover] = useState(false) return ( <> <div key={key} onMouseOver={() => {setHover(true)}} onMouseOut={() => {setHover(false)}} > <div> {title} </div> <h3> { isHovered && price } </h3> </div> </> ); }Hice que el precio de la tarjeta se mostrara si se desplazaba para que pueda ver que funciona en cada componente individual.
Si desea que el estado esté en el padre sin llegar a una matriz u objeto, puede usar un número en su lugar. Si solo va a estar activo un elemento a la vez, puede usar el índice del elemento activo como estado:
const { useState } = React; const things = ["foo", "bar", "baz"]; function Component() { const [active, setActive] = useState(-1); const updateActivity = (index) => setActive(index === active ? -1 : index); return ( <ul> {things.map((thing, index) => ( <li> <button key={index} onClick={() => updateActivity(index)}> {index === active ? <strong>{thing}</strong> : thing} </button> </li> ))} <li>Value: {active}</li> </ul> ); } ReactDOM.render( <Component />, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script> <div id="react"></div>Alternativamente, en los casos en los que desee que varios elementos estén activos simultáneamente, puede utilizar un enfoque de "marcador de bits" en el que cada bit del valor representa si el índice correspondiente está activo o no:
const { useState } = React; const things = ["foo", "bar", "baz"]; function Component() { const [active, setActive] = useState(0); const updateActivity = (index) => setActive(active ^ Math.pow(2, index)); return ( <ul> {things.map((thing, index) => ( <li> <button key={index} onClick={() => updateActivity(index)}> {active & Math.pow(2, index) ? <strong>{thing}</strong> : thing} </button> </li> ))} <li>Value: {active} ({active.toString(2).padStart(3, "0")})</li> </ul> ); } ReactDOM.render( <Component />, document.getElementById("react2") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script> <div id="react2"></div>