CODEWITHSUNDEEP
reactjssetstate
Jonathan Potter
Jonathan Potter

Reputation: 175

react setState not updating state in one of my functions

I'm working an a react app with a few forms and I am trying to implement an edit form for input items. The function first opens the list item in a pre-populated form. The editItem function currently looks like this:

editItem(event) {
    event.preventDefault();
    const target = event.target.parentNode.parentNode;
    const { key } = target.dataset;
    const { className } = target;
    const currState = { ...this.state[className] };
    const currItem = currState.list[key];
    for (let i in currItem) {
      if (i !== "list" && i !== "hidden") {
        currState[i] = currItem[i]
      }
    }
    this.setState({ [className]: currState });
    this.hideUnhide({target: {name: className}});
 

     }

I have confirmed with console logs that currState is correctly set with the values that I am looking for, and that I am not having an async issue. I am using this same format to set state in other functions in my app and all of the others are working properly. If I directly mutate state in the same place, I get the behavior I'm looking for (form fields populate), but nothing happens when I use setState.

Link to my github repo: here. The function in question is in App.js.

Upvotes: 0

Views: 218

Answers (1)

Jonathan Potter
Jonathan Potter

Reputation: 175

As Brian Thompson points out in his comment, it turns out that the hideUnhide function call directly after my setState uses setState as well and writes over the first setState call with the previous state:

  hideUnhide(event) {
    const { name } = event.target;
    const currState = { ...this.state[name] };
    if (currState.hidden === true) {
      currState.hidden = false;
    }
    this.setState({ [name]: currState });
  }

The way to prevent that was to use hideUnhide as a callback to the setState in editItem:

this.setState({ [className]: currState }, () =>
  this.hideUnhide({ target: { name: className } })
);

and now everything functions as intended.

Upvotes: 1

Related Questions