Getting initial useState list values when returning from a sub componet to save data instead of current state

I have recreated my problem in a simplified code example.
Follow these steps to reproduce it:

  1. Click on one of the three list items to edit the value in the off-canvas box.
  2. Change the value and click the save button.
  3. Select a different item to edit & save.
  4. Note: the original edited item has reverted back to its initial state.
    I have the console.logging in the save method to show that the list(state) is not the current (visible) version but the initial state.

Sandbox code example

I have an inelegant solution(workaround) that I will put as an answer but it doesn’t explain what or why this is happening. I have 3 off-canvas editors like this on my page & one does work as expected but the other two loose state when calling their save functions in the parent.

Source: JavaSript – Stack Overflow

November 27, 2021
Category : News
Tags: javascript | list | react-bootstrap | reactjs | use-state

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.