Tengo una matriz useState hook que consta de elementos con className. Quiero actualizar className de un solo elemento de ese enlace. ¿Cómo actualizo el valor único de un gancho useState? Por supuesto, voy a poner una condición antes de actualizar. aquí está el código -
display.map( word => ( Words[leftPointer] === word.props.children ? {...display, word:(<span key={uuid()} className="singleWord greenword"> {Words[leftPointer]}</span>)} : display ) ) setDisplay(display)aquí la pantalla contiene una matriz de intervalos. lo que quiero es cambiar el nombre de clase según el ejemplo de condición: después de actualizar el elemento className = "singleWord greenword" debe ser className="singleWord" de ese elemento.
La función de mapa devolverá una nueva matriz, por lo que solo tiene que almacenar la matriz en una nueva variable y establecer el estado con esa nueva variable
const newDisplay = display.map( (word) =>{ if(Words[leftPointer] === word.props.children){ return {word:(<span key={uuid()} className="singleWord greenword"> {Words[leftPointer]}</span>)} }else{ return word } }) setDisplay(newDisplay)Recomendaría no establecer className en el dominio del estado, ya que es parte del dominio de la interfaz de usuario. En su lugar, los cambios de datos se pueden usar para señalar respuestas en la representación de la interfaz de usuario. Esto es lo que significa que un programa esté basado en datos .
Aquí hay un ejemplo mínimo verificable. Ejecute el programa a continuación y cambie algunas cantidades para ver la actualización del estado de display . El className se cambia automáticamente según las condiciones aplicadas al estado de la aplicación.
function App() { const [display, setDisplay] = React.useState([ {item: "walnut", quantity: 0 }, {item: "peanut", quantity: 3 }, {item: "donut", quantity: 6 } ]) function update(index) { return event => setDisplay([ ...display.slice(0, index), { ...display[index], quantity: Number(event.target.value) }, ...display.slice(index + 1) ]) } return <div> {display.map((d, index) => <div key={index}> {d.item}: <input className={d.quantity > 0 ? "instock" : "outofstock" } value={d.quantity} onChange={update(index)} /> </div> )} <div>{display.every(d => d.quantity > 0) ? "✅" : "❌"}</div> <pre>{JSON.stringify(display, null, 2)}</pre> </div> } ReactDOM.render(<App/>, document.querySelector("#app")) input { outline: 0 } .instock { border-color: limegreen; } .outofstock { border-color: red; } pre { padding: 0.5rem; background-color: #ffc; } <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="app"></div>¿podría simplemente usar una variable de estado que contenga el texto para className y actualizar esa variable de estado en el enlace useState a lo que quiera?