0
102
Views¿Cómo puedo mostrar la X solo en una sola lista cuando paso el mouse sobre ella?
Me enfrento al problema cuando voy a pasar el mouse en una sola lista. Solo quiero mostrar la X solo en una sola lista cuando la desplazo. Pero se muestra en todos los cuando paso el mouse sobre uno solo.
import React from "react"; import { useState } from "react/cjs/react.development"; import "./list.css"; function List({ items }) { const [over, setOver] = useState(false); const mouseOver = () => { setOver(!over); }; return ( <ul> {items.map((item, i) => { return ( <> <li onMouseOver={mouseOver} onMouseOut={mouseOver} style={{ borderRight: `5px solid ${item.amount < 0 ? "red" : "green"}`, }} key={i} className="item-name" > <p>{item.itemName}</p> <p>{item.amount}</p> <p style={{ display: over ? "block" : "none" }}>X</p> </li> </> ); })} </ul> ); } export default List; 
·
Juan Pablo Isaza
2 answers
Answer question0
En cada elemento, debe tener un estado over y no debe compartirse para todos los elementos. Lo escribí así:
// import React from "react"; // import "./list.css"; const items = [ { id: 1, amount: 50000, itemName: "Salary" }, { id: 2, amount: -500, itemName: "Gym" }, { id: 3, amount: -5000, itemName: "Bill" }, ]; const List = () => { return ( <ul> {items.map((item) => ( <ListItem key={item.id} item={item} /> ))} </ul> ); } // export default List; const ListItem = ({ item }) => { const [over, setOver] = React.useState(false); const mouseOver = () => { setOver(!over); }; return ( <li onMouseOver={mouseOver} onMouseOut={mouseOver} style={{ border: "1px solid black", borderRight: `5px solid ${item.amount < 0 ? "red" : "green"}`, }} className="item-name" > <p>{item.itemName}</p> <p>{item.amount}</p> <p style={{ display: over ? "block" : "none" }}>X</p> </li> ); }; ReactDOM.render(<List />, document.getElementById('root')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"></div>
·
Juan Pablo Isaza
Report
0
Te enfrentas a este problema porque todos los li comparten over mismo estado. O necesita definir de alguna manera un estado para cada componente, o usar css puro para esto, que es el método que prefiero:
Método CSS puro:
.item-name .the-x { display: none; } .item-name:hover .the-x { display: block; }y cambiar la parte X a:
<li onMouseOver={mouseOver} /* remove this */ onMouseOut={mouseOver} /* remove this */ ... > ... <p style={{ display: over ? "block" : "none" }}>X</p> /* remove this */ <p className="the-x">X</p> /* use this */ ... </li> En lugar de display: none/block , puede usar opacity:0/1 o visibility:hidden/visible . usa cualquier propiedad CSS que prefieras
·
Juan Pablo Isaza
Report
Answer question