DOM in React is not updated properly set component dynamically

Question

In react seems like DOM is not updating Lets say on click of a checkbox lets say id is checkbox1 I want to add another checkbox lets say id Checkbox2 should be checked as well so

Checkbox id="checkbox1" onClick={this.handleChange.bind(this)} 
handleChange(){
    document.getElementById(checkbox2).checked=true;
}

while debug I can see below line executed

document.getElementById(checkbox2).checked=true;

But DOM is not updating, checked it is working with JavaScript some issue with react

Answer 1

Follow the react core principles update DOM using state only. It is mainly diffing concept to update virtual DOM. Below code snippet will work.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked1: false,
      checked2: false
    }

  }

  handleCheck = () => {
    this.setState({ checked2: !this.state.checked2 });
  }
  render() {
    return (
      <div>
        <input type="checkbox" id="chk1" onChange={this.handleCheck} checked={this.state.checked1} />
        <input type="checkbox" id="chk2" onChange={this.handleCheck} checked={this.state.checked2} />

      </div>
    );
  }
}
export default App;