React hooks - Update item in list after edit

user_17265121 0
Viewed 77

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>

)

jsx react-hooks reactjs crud javascript
3 Answers

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("");
}
user_57085660

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("");
};
user_139372860

Looks like you just forgot to add an onclick handler to the button:

  <button formAction="submit" onClick={handleAddSubmit}>Submit</Button>
user_150855780
Related