Component state not updating after unchecking checkbox in React

Question

I simply want to change the state of my app with a handleChange method for multiple checkboxes.

My state is changed from false to true when I click each of my checkboxes, but when I un-check it, my state doesn't change to reflect it and I cant seem to figure out why!

import React, { Component } from "react";

export class StepOne extends Component {
    constructor(props) {
        super(props);
        this.state = {
            box1: false,
            box2: false,
            box3: false,
        };
    }

    handleChange = (evt) => {
        const box = evt.target.name;
        this.setState({ [box]: !this.state.box });
    };

    render() {
        return (
            <div>
                <input type="checkbox" name="box1" onChange={this.handleChange} />
                <input type="checkbox" name="box2" onChange={this.handleChange} />
                <input type="checkbox" name="box3" onChange={this.handleChange} />
            </div>
        );
    }
}

kind user · Accepted Answer · 2020-04-28 19:13:20Z

1

When using a dot notation, compiler tries to look for a field called box in the state and since it doesn't exist - you are not getting any result when toggling the checkbox.

Use a bracket notation instead:

handleChange = (evt) => {
    const box = evt.target.name;
    this.setState((prevState) => ({ 
       [box]: !prevState[box],
    }));
};

Note: Consider using a function when setting the state to be sure that you refer to the relevant state.

answered Apr 28, 2020 at 19:13

kind user

42k8 gold badges69 silver badges78 bronze badges

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

Comments

Salah Eddine Makdour · Accepted Answer · 2020-04-28 19:31:33Z

1

you just have to make a change in your handleChange function as below:

  handleChange = (evt) => {
    const box = evt.target.name;
    this.setState([box]: evt.target.checked);
  };

this will give the state the same checked state of the checkbox (if the checkbox is checked, the state will be set to true, if it is not, it will be set to false). If you have any other problem with this solution you can comment so i can help you more

answered Apr 28, 2020 at 19:31

Salah Eddine Makdour

1,0521 gold badge15 silver badges24 bronze badges

Collectives™ on Stack Overflow

Component state not updating after unchecking checkbox in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related