Reputation: 117

Not able to update the checkbox using onChange

I am not able to Change the value of checkbox from false to true onclick on checkbox the onchange is not getting called.

checkedbox should be changed to true whwn ever we clicked the checkbox

this.state = {
  checkedbox: false,
}

 render() {
 <Checkbox
   label="test"
   value={checkedbox}
   onChange={this.handelCheck}
  />
}



 handelCheck = (event) => {
this.setState({
  checkedbox: event.target.checked
});
}

Upvotes: 0

Answers (5)

Daniel Levy

Reputation: 94

try this one change on the value in the Checkbox to

value={this.state.checkedbox}

and change the handelCheck to just change to

 !this.state.checkedbox

and it shold work

  this.state = {
      checkedbox: false,
    }
    
     render() {
     <Checkbox
       label="test"
       value={this.state.checkedbox}
       onChange={this.handelCheck}
      />
    }
    
    
    
     handelCheck = () => {
    this.setState({
      checkedbox: !this.state.checkedbox
    });
    }

Upvotes: 0

Andy

Reputation: 63524

It depends how you're logging that state after you've changed it. setState provides a callback that you can use to do things after the async process has completed, like logging the new state.
Depending on whether you're using a library or rolling your own Checkbox component, checked rather than value for your component property is much more meaningful.
You should be passing in the checked state to your checked property, not a random variable called checked.

In this short example I've created my own Checkbox component to show you how it all fits together.

const { Component } = React;

class Example extends Component {

  constructor() {
    super();
    this.state = { checked: false };
  }

  // Set the state, and the call the callback
  // function to log the new state
  handleChange = (e) => {
    this.setState({ checked: e.target.checked }, () => {
      console.log(this.state.checked);
    });
  }

  render() {
    return (
      <div>
        <Checkbox
          label="test"
          checked={this.state.checked}
          handleChange={this.handleChange}
        />
      </div>
    );
  }

};

class Checkbox extends Component {

  render() {
  
    const {
      checked,
      label,
      handleChange
    } = this.props;

    return (
      <fieldset>
        <legend>{label}</legend>
        <input
          type="checkbox"
          checked={checked}
          onChange={handleChange}
        />
      </fieldset>
    )
  
  }

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

input[type="checkbox"]:hover { cursor: pointer; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Upvotes: 1