Mi idea es que cuando el mouse ingrese al elemento, extraiga el elemento, actualizará el elemento y cambiará su texto aquí está el código:
{skillItems.map((item, index) => { const { id, name} = item; return ( <li key={id} className="singleChart" onMouseOver={() => setOver(true)} onMouseLeave={() => setOver(false)} >{overEffect ? name : ""}</li>)Pero cuando pasa el mouse sobre el elemento, todos los demás elementos también cambian. ¿Qué tengo que hacer?
Gracias
también debe guardar la identificación del elemento para el elemento del mouse sobre
skillItems.map((item, index) => { const { id, name} = item; return ( <li key={id} className="singleChart" onMouseOver={() => setOver({value:true,id})} onMouseLeave={() => setOver({value:false,id})} > {(overEffect.value&&overEffect.id) ? name : ""}</li>)En este caso, necesita un objeto de estado un poco más complejo. Usé un objeto para mantener el estado de cada elemento de la lista. Una forma de hacerlo es así: https://codesandbox.io/s/https-stackoverflow-com-questions-69612695-update-the-specific-item-in-map-loop-69613214-69613214-z5o17?file= /src/App.js : avíseme si puede acceder a esto.
Lo que se hace aquí es que tuvimos que construir el objeto de estado usando el método de reducción y luego tenemos que cuidar cómo establecemos el nuevo estado (no para anular algo).
import React from "react"; function App() { const skillItems = [ { id: 1, name: "111" }, { id: 2, name: "222" }, { id: 3, name: "333" } ]; const stateObj = skillItems.reduce((acc, curr) => { const keys = Object.keys(curr); if (!acc) { return Object.assign({}, { [keys[0] + curr.id]: true }); } return Object.assign(acc, { [keys[0] + curr.id]: true }); }, null); const [overEffect, setOver] = React.useState(stateObj); console.log("overEffect", overEffect); return ( <div className="App" style={{ backgroundColor: "pink" }}> {skillItems.map((item, index) => { const { id, name } = item; const key = "id" + id; return ( <li key={id} onMouseOver={() => setOver({ ...overEffect, [key]: false })} onMouseLeave={() => setOver({ ...overEffect, [key]: true })} > {overEffect[key] ? name : ""} </li> ); })} </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render( <StrictMode> <App /> </StrictMode>, rootElement );Si necesita cambiar solo un elemento, puede tener solo un estado que mostrará el índice del elemento en el que se sobrescribirán las moues. Entonces puedes hacer esto
{skillItems.map((item, index) => { const { id, name} = item; return ( <li key={id} className="singleChart" onMouseOver={() => setOver(index)} onMouseLeave={() => setOver(-1)} >{overEffect === index ? name : ""}</li>)o lo mismo con ids
{skillItems.map((item, index) => { const { id, name} = item; return ( <li key={id} className="singleChart" onMouseOver={() => setOver(id)} onMouseLeave={() => setOver(null)} >{overEffect === id ? name : ""}</li>)