I'm new to React Hooks. I am trying to make a small crud app, with add, edit, delete. I have some issues getting my edit function to work. When I click the edit, the input will add the values of the element that is clicked. But how do I update the item?
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>
)
You can use a map to go through each element of a list and create a new object for the item you want to update:
const editItem = (item) => {
setItems(items.map(i => i.id === item.id
? {...i, comment, amount}
: i);
setComment("");
setAmount("");
}
Looks like you just forgot to add an onclick handler to the button:
<button formAction="submit" onClick={handleAddSubmit}>Submit</Button>
So acc to your code when you click on the edit button, this function gets triggered
const editItem = (item: any) => {
setFile(undefined);
setComment(item.comment);
setAmount(item.amount);
};
Now this function is updating the state and inside the input tags you are using the state as values, so this is the reason why you are getting the results you are getting
Now you can change your code to
const editItem = (item) => {
setItems(items.map(i => i.id === item.id ? {...i, comment, amount} : i);
setComment("");
setAmount("");
};