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

as in question title, not able mark checkbox selected, on onchange event of selectbox this,

<select id='featurestype' onchange={this.handlechange.bind(this, 'type')} >  {this.getoptions(featurestype)}  </select> 

were handlechange :

 handlechange: function (field, e) {              if (field == 'type') {                 let selected = e.target.value;                 this.setstate({typeselected: selected})             }             /*why console taking previous selecte option, ex: if locker selectec below lone prints 'dc' */              console.log(field ,',',  this.state.typeselected)         }, 

when bind defaultvalue,

defaultchecked={(this.state.typeselected =='locker')}

1. the select box not able mark wrt condition given, manually able mark checked/notchecked.

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

2. on checked attribute, checkbox able mark checked, based on select box option value. in case manual way of checking or un-checking not happening.

hope guys got problem

here jsfiddle

i wanted checkbox act both ways, on select of option, checkbox should checked. , user can check/uncheck checkbox manully

react docs says:

setstate() not mutate this.state creates pending state transition. accessing this.state after calling method can potentially return existing value.

there no guarantee of synchronous operation of calls setstate , calls may batched performance gains.