ReactJS when using HTML attribute checked, reactjs is not allowing to select the checkbox

Question

As in the question title, I am not able to mark the checkbox as selected, on onChange event of the selectbox like this,

<select id='featuresType'
onChange={this.handleChange.bind(this, 'type')} >
 {this.getOptions(featuresType)}
 </select>

were as the handleChange is like :

 handleChange: function (field, e) { 
            if (field == 'type') {
                let selected = e.target.value;
                this.setState({typeSelected: selected})
            }
            /*Why the console is taking the previous selecte option, ex: if Locker is selectec below lone prints 'dc' */
             console.log(field ,',',  this.state.typeSelected)
        },

when it is bind to defaultValue,

defaultChecked={(this.state.typeSelected =='locker')}

1. The select box is not able to mark wrt the condition given, but manually could able to mark checked/notchecked.

checked={(this.state.typeSelected =='locker')}

2. On this checked attribute, the checkbox is able to mark as checked, based on select box option value. BUT in this case the manual way of checking or un-checking is not happening.

Hope you guys got my problem

Here is the JSFiddle

I wanted the checkbox to act both ways, on select of the option, the checkbox should be checked. And also user can check/Uncheck the checkbox Manully

Answer 1

React Docs says:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.