Tengo un requerimiento bastante simple que me está resultando bastante complejo. Estoy desarrollando una aplicación de tareas básicas con la siguiente interfaz de usuario:
Ahora necesito actualizar la matriz de objetos de modo que solo se actualice el texto de un elemento específico. Aquí está mi intento, pero solo agrega un nuevo componente en cada pulsación de tecla:
import React, {useState} from "react"; const DynamicInput = () => { const [todos, setTodos] = useState([]) const onAddClick = () => { setTodos(prevState => { return [...prevState, {id: prevState.length + 1, text: "", up: "↑", down: "↓", del: "x"}] }) } const onValueUpdate = (id) => (event) => { let tempObject = todos[id] setTodos(prevState => { return [...prevState, { id: id, text: event.target.value, up: "Up", down: "Down", del: "x" }]; }) } const onUpArrow = (event) => { console.log("On up") } const onDownArrow = (event) => { console.log("On down") } const onDeleteArrow = (event) => { console.log("On delete") } return ( <> <button onClick={onAddClick}>+</button> {todos.map(todo => { return( <div key={todo.id}> <input onChange={onValueUpdate(todo.id)} value={todo.text}></input> <button onClick={onUpArrow}>{todo.up}</button> <button onClick={onDownArrow}>{todo.down}</button> <button onClick={onDeleteArrow}>{todo.del}</button> </div>) })} </> ); }; export default DynamicInput;Para simplemente resolver su problema, puede cambiar su método onValueUpdate() a esto:
const onValueUpdate = (id) => (event) => { setTodos(prevState => { let data = [...prevState]; let indexOfTodo = data.findIndex(todo => todo.id === id); data[indexOfTodo] = { ...data[indexOfTodo], text: event.target.value, }; return data; }); };