React: Showing wrong state value in console

[koushikchhetri]

I have a Signup component which has it's own state defined in constructor.
this.state = { email: '', fullname: '', username: '', gender: '', password: '', cpassword: '' };

This component has the following event listner to update the state
onChange (e) { this.setState( {[e.target.name]: e.target.value} ); //console.log(this.state.gender); }

And in render(), I have the following jsx code which will allow user to select his/her gender
<div style={{marginBottom: '25px'}} className={classnames("input-group", {'has-error': errors.gender})}> <div className="btn-group"> <button type="button" className={classnames("fa fa-male btn", {'btn-default': !this.state.gender, 'btn-primary': this.state.gender==='male'})} title="You are male?" value="male" name="gender" onClick={this.onChange}></button> &nbsp; <button type="button" className={classnames("fa fa-female btn", {'btn-default': !this.state.gender, 'btn-primary': this.state.gender==='female'})} title="You are female?" value="female" name="gender" onClick={this.onChange}></button> </div> </div>

So, when click to the male button it shows me male in console at onChange event but as soon as I click to female button, it often logging male value where as I should have gotten female. But I am getting correct value when I render gender state to jsx.

Could you please explain why this problem is happening? Is react taking time to set it's own component state?

[Quanthir]

You should provide a jsfiddle example to look further for your problem. Please use the guidelines when opening a new issue.

[aweary]

@koushikchhetri as stated by @Quanthir and the issue template, we'd need an example reproducing the issue to be of any help. You can use https://jsfiddle.net/reactjs/69z2wepo/ as a starting point!

[koushikchhetri]

@aweary I have updated the fiddle with the changes. I observed these two following issues in the developer console.
1) When page is loaded, if you click any of the buttons first time you will get blank gender in console.
2) Now from second click you will get the gender properly in console. Stick to any button and click 3 to 4 times after that click another gender button, you will get the previous gender for one time then it will as usual.
@Quanthir

[aweary]

I have updated the fiddle with the changes

@koushikchhetri sorry, I should have been clearer. With JSFiddle you have to fork a new fiddle
containing your changes.

Once you fork it the URL will change, and you can share that here for us to review.

[koushikchhetri]

@aweary Please check https://jsfiddle.net/ug7jssLr/
@Quanthir

[johann-sonntagbauer]

@koushikchhetri setState is an async operation. Please take a careful look at the documentation.

https://facebook.github.io/react/docs/react-component.html#setstate

I've updated your fiddle to illustrate the fix:
https://jsfiddle.net/vpkzhnzs/1/

[koushikchhetri]

@johann-sonntagbauer Thanks, I understood now.

[aweary]

@johann-sonntagbauer is exactly right! Also see this section in the docs, setState Updates May Be Asynchronous.

I'll go ahead and close this out since there doesn't seem to be an issue with React.