React setState variable issue

Question

I'm am using React to set the visbility (isMarkerShown) of a marker when I click a menu item which is handle by my handleMarker(). I get an undefined value if I tried to set the state like how I did below.

state = {
    collapsed: false,
    visible: false,
    marker: {
      isMarkerShown: false,
      lat: 0,
      lng: 0,
    },
  };

handleMarker() {
    this.setState({marker: this.setState({isMarkerShown: true})});
    console.log(this.state.marker);
  }

Tip: don't try to use a new state right after you used setState. The setState is asynchronous, if you want to use the new state, use the callback of setState. Just a complement to the answers below. — leofalmeida
– leofalmeida, Commented Dec 3, 2019 at 1:05

Nick · Accepted Answer · 2019-12-03 00:59:50Z

2

It looks like you might be trying to maintain the rest of the marker props while changing isMarkerShown. If that's the case, the following approach may help:

handleMarker() {
  this.setState({ 
    marker: {
      ...this.state.marker,
      isMarkerShown: true
    }
  });
}

answered Dec 3, 2019 at 0:59

Nick

16.7k3 gold badges21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kind user Over a year ago

I guess it would be better to use a callback in this case

axesspwns Over a year ago

Thanks a bunch!!! I was able to put my markers down on Google Maps correctly.

kind user · Accepted Answer · 2019-12-03 00:57:31Z

1

setState function is a void function - it does not return anything. So actually if you are assigning it to some variable, it will hold an undefined value.

Just try to set the state directly:

this.setState((prevState) => ({ 
   marker: {
      ...prevState.marker,
      isMarkerShown: true,
   },
});

answered Dec 3, 2019 at 0:57

kind user

42k8 gold badges69 silver badges78 bronze badges

Comments

adamz4008 · Accepted Answer · 2019-12-03 01:10:15Z

0

If you need to access value of current/previous state while setting state- like toggling on/off- you can access it directly within the setState call. You can also use functional setState to ensure your state updates happen in order:

this.setState(prevState => ({ marker: { ...prevState.marker, isMarkerShown: !prevState.marker.isMarkerShown } }))

edited Dec 3, 2019 at 1:10

answered Dec 3, 2019 at 1:02

adamz4008

6504 silver badges10 bronze badges

Collectives™ on Stack Overflow

React setState variable issue

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related