How to handle checkbox checked status in reactJS

Question

I have multiple checkbox in my React Class B.js:

<input
   type="checkbox"
   inline={true}
   checked={this.props.checkBoxDefaultStatus}
   onChange={this.handleCheckBoxClick} 
/>

Now the prop checkBoxDefaultStatus is passed from parent class A.js.

A.js

this.state = {
  checkBoxDefaultStatus: false
}

handleMultiSelect() {
    this.setState({
        checkBoxDefaultStatus: true
    })
}

render() {
  <B checkBoxDefaultStatus={this.state.checkBoxDefaultStatus} />
}

EDIT: Now All my child checkboxes are getting checked when I click on parent checkbox, but the issue is that my child checked boxes checked status does not change when I click on them as they are already set by parent prop. I need some way to maintain this also.

This is the behaviour I want https://stackoverflow.com/a/35218069/6574017

Answer 1

If you want change parent component state inside child component, then you have to pass parent component method to child component as props like below,

<B handleCheckBoxClick={this.handleMultiSelect}/>   

Check below working code. I build 2 component for your scenario.

class B extends React.Component {
   constructor(){
    super();
    this.state = {
      checkBoxClick : {
        1: false,
        2: false
      }
    }
    this.handleCheckBoxClick = this.handleCheckBoxClick.bind(this);
   }
   
   handleCheckBoxClick(no, event){
    //console.log('no', no);
    //console.log('event.target.value', event);
    var checkBoxClick = this.state.checkBoxClick;
    checkBoxClick[no] = !this.state.checkBoxClick[no];
    this.setState({
      checkBoxClick
    });
    
    var alltrue =Object.keys(checkBoxClick).every((k) =>{ return checkBoxClick[k] });
    //console.log('alltrue', alltrue);
    if(alltrue){
      // console.log('alltrue in if : ', alltrue);
      this.props.handleMultiSelect();
    }
    
    if(this.props.checkBoxDefaultStatus){
      this.props.handleMultiSelect();
    }
   }

  render(){
    //console.log('this.state.checkBoxClick :', this.state.checkBoxClick);
    //console.log('this.props.checkBoxDefaultStatus :', this.props.checkBoxDefaultStatus);
    return(
    <div>
    Child component check-box <br />
      <input
       type="checkbox"
       checked={this.props.checkBoxDefaultStatus ? this.props.checkBoxDefaultStatus : this.state.checkBoxClick[1]}
       onChange={(e) => {this.handleCheckBoxClick(1, e.target.checked)}} 
    /> Bar 1<br />
    <input
       type="checkbox"
       checked={this.props.checkBoxDefaultStatus ? this.props.checkBoxDefaultStatus : this.state.checkBoxClick[2]}
       onChange={(e) => {this.handleCheckBoxClick(2, e.target.checked)}} 
    /> Bar 2<br />
    </div>
    );
  }
}

class A extends React.Component {

  constructor() {
    super();
    this.state = {
      checkBoxDefaultStatus: false
    }
    
    this.handleMultiSelect = this.handleMultiSelect.bind(this);
  }

  handleMultiSelect() {
    //console.log('aaaa')
    this.setState({
      checkBoxDefaultStatus: !this.state.checkBoxDefaultStatus
    })
  }

  render() {
  //console.log('checkBoxDefaultStatus :', this.state.checkBoxDefaultStatus);

    return (
    <div>
      <input type="checkbox" onClick={() => {this.handleMultiSelect()}} checked={this.state.checkBoxDefaultStatus}/>
      Check all<br />
      <B checkBoxDefaultStatus={this.state.checkBoxDefaultStatus}
        handleMultiSelect={()=>{this.handleMultiSelect()}}
      />
      </div>
    );
  }
}

ReactDOM.render( < A / > , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>

Answer 2

Please using checked prop instead of defaultChecked like this:

<input
   type="checkbox"
   inline={true}
   checked={this.props.checkBoxDefaultStatus}
   onChange={this.handleCheckBoxClick} 
/>