De acuerdo, definitivamente hay una solución rápida para esto que simplemente no puedo entender.
Solo una descripción de lo que estoy tratando de hacer:
Cada vez que paso el cursor sobre una determinada tarjeta, me gustaría ver la descripción de ese artículo y solo ese artículo. Pero en cambio, lo que obviamente está sucediendo, como puede ver en mi código, es que se muestra la descripción de cada tarjeta.
Reescribí una versión más simple del código eliminando las piezas innecesarias. Todo se importa correctamente, también se eliminaron el estilo y los nombres de clase.
export function Items() { const [items, setItems] = useState([]) const [isHovering, setIsHovering] = useState(false) useEffect(() => { setItems(Data) }, []) function handleMouseOver() { setIsHovering(true) } function handleMouseOut() { setIsHovering(false) } return( <div> {items.map(item => { return( <Card onMouseOver={handleMouseOver} onMouseOut={handleMouseOut} key={item.id}> {isHovering ? <Card.Body> <p>{item.item_description}</p> </Card.Body> : <Card.Body> </Card.Body> } <Card.Footer> </Card.Footer> </Card> ) })} </div> ) }Por lo que puedo ver, no necesita poner esta lógica en el componente principal, y también hace que todo sea más complejo, ya que es difícil administrar el desplazamiento. Crearía un nuevo componente chlid y administraría este estado internamente.
export function Item({item}) { const [isHovering, setIsHovering] = useState(false); useEffect(() => { setItems(Data); }, []); function handleMouseOver() { setIsHovering(true); } function handleMouseOut() { setIsHovering(false); } return ( <Card onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}> {isHovering ? ( <Card.Body> <p>{item.item_description}</p> </Card.Body> ) : ( <Card.Body></Card.Body> )} <Card.Footer></Card.Footer> </Card> ); } export function Items() { const [items, setItems] = useState([]); return ( <div> {items.map(item => ( <Item key={item.id} item={item} /> ))} </div> ); }Su estado "isHovering" también debe ser una matriz, donde almacena el estado de desplazamiento para cada tarjeta. Luego, al pasar el mouse, establezca "isHovering" en verdadero solo para la tarjeta correcta.