• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

101
Vistas
¿Cómo muestro datos en una tarjeta cuando paso el mouse y no en todas?

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> ) }
almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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> ); }
almost 3 years ago · Juan Pablo Isaza Denunciar

0

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.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda