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')}

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')}

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

Community · Accepted Answer · 2020-06-20 09:12:55Z

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 5, 2016 at 22:09

luboskrnac

24.7k10 gold badges86 silver badges93 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related