Update item form keeps deleted input with cancel and generally doesn't work while item is markes as purchased

[laurasliwa]

Hi,
I'm currently working on the User Story "Update shopping item".
When I want to edit an item and click on the button, my Form component is pre-filled with the item details. If I emoty one or more input fields, then click on cancel and the edit button again, the deleted but canceld fields are still empty (except for the category).

My other problem is that I get an error message when I want to edit an item which is marked as purchased.

Unhandled Runtime Error
TypeError: onToggleIsEditing is not a function

Source: ShoppingItemList.js in Line

24

I have committed and pushed my current status in this PR.

Thank you for your help!

[ahohnsen]

The second problem occurs cause the function was not passed as a prop. We have fixed that already. 🙂

[eneben]

I just had a quick look. I logged the editItem, which changes completely to null when you click on the Cancel button and then back to the correct item. In the form, only the category is filled in and the rest is not. I think that's because the category is in a useEffect with editItem in the dependency array. That's why it's re-rendered, but not the entire form component. You could include all defaultValues ​​in the existing useEffect. But that obviously complicates the code quite a bit. Or you would have to somehow render the entire form component depending on editItem. 🤔 🤷‍♀️

[ahohnsen]

Hey Laura,

When you click the edit button, your form loads with the item’s details. However, if you clear out any input field, click cancel, and then return to the edit form, those previously emptied fields remain blank. This happens because the form stays mounted the entire time, so some fields hold onto their last state instead of resetting to their initial values.

Solution: Use a Mode State to Toggle Form Visibility

To resolve this, you can toggle the form visibility based on a mode state. By controlling when the form is shown, you can ensure it always appears freshly reset. Here’s how it works:

1. Create a Mode State: Set a mode state in your index.js, which can be either default, edit, or add.
2. Conditionally Render the Form: Use the mode to decide when to render the form:
   - In edit mode, the form appears with the item’s details as defaultValue.
   - In add mode, the form appears blank, ready for new item details.
   - In default mode, the form stays hidden (initial value of the mode state).
3. Result: When you toggle from default to edit, the form re-renders with a fresh state. This way, it correctly applies the defaultValue to all fields, including the <select>, every time you enter edit mode.

Why This Solves the Problem with <select>

Here’s why your <select> didn’t reset correctly compared to other inputs:

• Input Fields: defaultValue works well with elements like <input type="text"> because they update whenever the form re-renders, reflecting any new defaultValue.
• Select Fields: Once mounted, <select> elements hold onto their selected option, ignoring any changes to defaultValue. So, the <select> won’t reset unless it’s remounted. By toggling the form off and back on, the <select> effectively mounts again, so it correctly applies defaultValue based on the current item’s details.

Try implementing this mode approach. This way, you’ll have your form displaying the initial values correctly every time you open it for editing, without any leftover states from previous attempts.

PS: With my suggested change, you can make the select uncontrolled again and remove the useEffect to update the editItem as well.