how to hide or show a div if checkbox is selected in React JS

You can do it like this:

class Component extends React.Component {
  constructor() {
    super();

    this.state = { checked: false };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    this.setState({
      checked: !this.state.checked
    })
  }

  render() {
    const content = this.state.checked 
      ? <div> Content </div>
      : null;

    return <div>
      <div>
        <label>Check</label>
        <input 
          type="checkbox" 
          checked={ this.state.checked } 
          onChange={ this.handleChange } />
      </div>

      { content }
    </div>;
  }
}

Example

Also, you can use CSS class(with display property) in order to toggle(display: none/block;) element

render() {
  const hidden = this.state.checked ? '' : 'hidden';

  return <div>
    <div>
        <label>Check</label>
        <input 
          type="checkbox" 
          checked={ this.state.checked } 
          onChange={ this.handleChange } />
      </div>

      <div className={ hidden }>1</div>
      <div className={ hidden }>2</div>
      <div className={ hidden }>3</div>
      <div className="bold">3</div>
      <div className={ hidden }>4</div>
    </div>;
  }

Example