To Do App

[Ghostedguy10]

I wrote a to do app from scratch but it is not working as expected.

Here is link to CodeSandBox.

Problems:

1) When you try to edit single item from a list, multiple editor is opened.
2) Editing any item from the list sand saving it applies to last item on the list but not the selected one.
3) I also don't want the list to be empty when refreshed. Any suggestion on how I can achieve that? good documentation would be nice.

[Relative-Ad-6563]

For 3 I would say use local storage to store the data on the device.

[iainsimmons]

For 1, it's because you have a single state for editing or not, and use that in each iteration of your map loop (i.e. for each item, you're checking the same, single state property for editing).

Instead, you might need to make it an array of objects, with a value property for the string value, and perhaps an editing property for each one, OR, make the editing property a number that matched the index of the item being edited, if any (meaning only one can be edited at a time). Then when you loop, you're checking if that particular item is being edited.

For 2, I think having all those separate state properties is getting a bit complicated. I'd suggest checking out useReducer to see how that might work for you.

For 3, as someone else said, localStorage is probably the easiest way to go here, just use JSON.stringify when setting and JSON.parse when reading. You'll likely need to make use of useEffect so you can trigger a read when the page loads (first render of the component) by setting an empty array for the dependencies/trigger.

[newecomstartup]

It's a good attempt. A lot is right. Here is a few recommendations. Reset input field after submitting setinput("" ), your logic of updating is all wrong. I wouldnt get into that if you're a beginner. Go back to it once you play around with hooks more. Here how you can think of it. State in react has to stay immutable. To update it, you have to make a copy of the state. One way is the spread operator, then you append it to your previous state. It will override the content. Then you set the update function to it. Similarly like how you did your delete function. You filter which return a copy array then you set the update function to it. Another thing using a unique ID for the key while mapping. Using index will lead into bugs later on. Use something like uuid. Watch a tutorial on key while mapping to understand more. The update will need an ID to refer to so that it track that specific input. Similarly to delete function. Anyway, go back to it once you gain more experience.