ReactJs Checkbox - cannot uncheck

Question

I am trying to set the checked prop of a checkbox using a state, updated code with handleChange function:

getInitialState: function() {
    return {
        selected:0,
        contactId: 0
    };
},

handleChange: function(e) {
    var id = this.state.contactId;

    console.log(e.target.checked);

    if (e.target.checked === true){

        console.log('selected');

        contactChannel.publish({
                    channel: "contact",
                    topic: "selectedContact",
                    data: {
                        id: [id]
                    }});

    } else{

        basketChannel.publish({
            channel: "basket",
            topic: "removePersonFromBasket",
            data: {
                id: [id]
            }
        });


        console.log('deselected flag');


    }
},
render: function() {

    var id = this.state.contactId;
    var isSelected = this.state.selected;

    console.log(isSelected);

    return (
        <div className="contact-selector">
            <input type="checkbox"
                   checked={isSelected}
                onChange={this.handleChange} />
        </div>
    );
}

However, once the checkbox is checked by default I cannot uncheck it, can anyone please tell me how to do this?

Many thanks

Can you add the handleChange function?

udidu
– udidu

2015-08-06 08:00:41 +00:00
Commented Aug 6, 2015 at 8:00 — udidu
– udidu, Commented Aug 6, 2015 at 8:00

udidu · Accepted Answer · 2015-08-06 08:15:09Z

5

In the handleChange function you are always using the same value for the state of the check box but you need to reverse it.

add this to your handleChange function:

handleChange:function(event){
    this.setState({selected: !this.state.selected}); //look at the !NOT sign

}

answered Aug 6, 2015 at 8:15

udidu

8,6167 gold badges53 silver badges69 bronze badges

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

Comments

Salketer · Accepted Answer · 2015-08-06 08:03:13Z

0

The problem is because you return with the wrong variable. Changing {isSelected} with {this.state.selected} should work.

getInitialState: function() {
    return {
        selected:0,
        contactId: 0
    };
},


render: function() {

    var id = this.state.contactId;
    var isSelected = this.state.selected;

    console.log(isSelected);

    return (
        <div className="contact-selector">
            <input type="checkbox"
                   checked={this.state.selected}
                onChange={this.handleChange} />
        </div>
    );
}

answered Aug 6, 2015 at 8:03

Salketer

15.8k2 gold badges32 silver badges64 bronze badges

3 Comments

putvande Over a year ago

And why is that? They have the same value.

Bomber Over a year ago

Changed to checked={this.state.selected}, and still cannot uncheck, any ideas?

Salketer Over a year ago

I am sorry, I tried... I'm from another world than ReactJS and the recomputation is done only on the returned string... Hence why the isSelected would have always same value...

Vishnu · Accepted Answer · 2015-08-06 08:16:54Z

-1

getInitialState: function() {
    return {
        selected:0,
        contactId: 0
    };
},

handleChange:function(event){
    this.setState({selected: !this.state.selected});
    isSelected = this.state.selected;

    console.log(isSelected);
}

render: function() {

    var id = this.state.contactId;
    var isSelected = this.state.selected;

    console.log(isSelected);

    return (
        <div className="contact-selector">
            <input type="checkbox"
                   checked={isSelected}
                onChange={this.handleChange} />
        </div>
    );
}

edited Aug 6, 2015 at 8:16

answered Aug 6, 2015 at 8:09

Vishnu

12.4k7 gold badges56 silver badges91 bronze badges

1 Comment

putvande Over a year ago

That will just keep on having the same value again.

Collectives™ on Stack Overflow

ReactJs Checkbox - cannot uncheck

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related