Soy nuevo en React Hooks. Estoy tratando de hacer una pequeña aplicación crud, con agregar, editar, eliminar. Tengo algunos problemas para que mi función de edición funcione. Cuando hago clic en editar, la entrada agregará los valores del elemento en el que se hace clic. Pero, ¿cómo actualizo el artículo?
const [items, setItems] = useState<any>([]); const [comment, setComment] = useState(""); const [amount, setAmount] = useState(""); const handleAddSubmit = (e: any) => { e.preventDefault(); const newItem = { id: new Date().getTime(), comment: comment, amount: amount, preview: preview } setItems([...items].concat(newItem)); setFile(null); setComment(""); setAmount(""); }; const editItem = (item: any) => { setFile(undefined); setComment(item.comment); setAmount(item.amount); }; const deleteItem = (id: any) => { const updatedItems = [...items].filter((item) => item.id !== id); setItems(updatedItems); } return ( <div> {items.map((item: any, index: any) => { return ( <div key={item.id}> <div>{item.comment}</div> <div>{item.amount} $</div> <div onClick={() => editItem(item)}>Edit</div> <div onClick={(e) => deleteItem(item.id)}>Delete</div> </div> ); })} <input value={comment} onChange={(e) => setComment(e.target.value)} placeholder="Comment" /> <input value={amount} onChange={(e) => setAmount(e.target.value)} type="number" /> <button formAction="submit">Add</button> </div>)
Puede usar un mapa para recorrer cada elemento de una lista y crear un nuevo objeto para el elemento que desea actualizar:
const editItem = (item) => { setItems(items.map(i => i.id === item.id ? {...i, comment, amount} : i); setComment(""); setAmount(""); }Parece que se olvidó de agregar un controlador onclick al botón:
<button formAction="submit" onClick={handleAddSubmit}>Submit</Button>Entonces, según su código, cuando hace clic en el botón Editar, esta función se activa
const editItem = (item: any) => { setFile(undefined); setComment(item.comment); setAmount(item.amount); };Ahora esta función está actualizando el estado y dentro de las etiquetas de entrada está utilizando el estado como valores, por lo que esta es la razón por la que está obteniendo los resultados que está obteniendo.
Ahora puedes cambiar tu código a
const editItem = (item) => { setItems(items.map(i => i.id === item.id ? {...i, comment, amount} : i); setComment(""); setAmount(""); };