[SOLVED] Last document getting updated

Just tell me how to get the id of only one document

TL;DR

Issue: When clicking the "update" button, only the last item is getting updated instead of the selected item. Solution: The issue was resolved by using a state variable to point to the selected item. The value was stored in the state and used in the `value` attribute of the input. An `onChange` attribute was added to the input to update the value with the `setState` function. It was suggested to use the `value` attribute instead of the `placeholder` to display the value in the input. Additionally, it was recommended to try a suggestion from another user. The user's code was shared on GitHub and

The thing is

if delete document is working properly

Why edit won't work

Hey @safwan Can you a take a look here?

sure let me check

@Susmita could you send you updated code? Also please try to enable JS formatting by typing js after the first 3 backticks

I don't have nitro to do that. It exceeds text limit and can't be formatted

okay no worries can you just the send a file or something?

code is uploaded on github

sharing the links here

This is the problem

If you're using conditional rendering, then, you'll always get the last item as this what that item is pointing to.

To overcome it, you can try different approaches.

Change from conditional rendering to conditional visibility (with css and classes)
Use useRef to create a new pointer for the data.

Here's the link:- https://github.com/Susmita-Dey/ProManager/blob/main/components/Todos.jsx

@Susmita I just looked through your code. One thing I want to ask is if this issue happens even after you close the modal, and reopen it?

For example: You said that when you click the last item, it shows the value of the first item right? What happens when you close that modal and try to edit the last item again?

Another thing is to try @Binyamin's suggestion.

Also, why display the value in the placeholder, when you can use the value attribute in the input?

You can store the value in a state, and use that state in the value attribute. Add an onChange attribute to the input that calls the setState function to update the value seamlessly

Yes

When I click on the first/second item, the last item comes up. After closing the modal and reopening it or reloading the page and then reopening the modal, same thing happens