React setState call not updating state

Question

I have a React setState call that is choosing to misbehave, and I can't figure out what's going on. I think I've got it narrowed down a fair bit - this is the method in question:

  setShowDeleteEventModal = (value) => {
    console.log('dude', value); //logs true
    this.setState(() => ({ showDeleteEventModal: value }), () => {
      console.log('hey', this.state); //logs state showing 'showDeleteEventModal: false'
    });
  };

What I've done so far:

Checked to see if it's async - it isn't, based on the problem showing up in the callback function, though I also used a setTimeout to check it; Made sure I have state properly declared; Checked spelling on my variables, including using Find to make sure they all show up under the same spelling; Checked the type of value in case it was a String - it's a boolean; Rewrote the entire implementation.

Desired behavior: showDeleteEventModal shows up true after the setState call. Actual behavior: it doesn't.

I call this method from a button onClick in a sub-component, but since 'dude' and 'true' show up to the screen I know it's getting into here. showDeleteEventModal is a switch that controls whether a modal is displayed or not.

The part that baffles me most about it is that I have an extremely similar setup in the same file which works flawlessly. Here is the other method:

setShowOnMap = (value) => {
  this.setState(() => ({ showOnMap: value }));
};

And here is the button call from the subcomponent with the prop being passed in:

<div className = "button background-red width15"
          onClick = {props.switchModals}
        >
          Remove this event
        </div>

switchModals = {
  () => {
    this.setShowDeleteEventModal(true);
    this.closeModal()
  }
}

The whole file is a little long for posting here, but hopefully this will be enough and I'm just missing something silly.

Answer 1

setShowDeleteEventModal = (value) => {
  console.log('dude', value); //logs true
  this.setState({ showDeleteEventModal: value }, () => {
    console.log('hey', this.state); //logs state showing 'showDeleteEventModal: false'
  });
};

Try to remove the arrow function call, for your first parameter just put the state object instead, just like above