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

Question

how can I show/hide a div based on checkbox state(checked- unchecked) in React JS, I'm pretty new to React, I know how to do this in jquery but on React is another approach. thanks in advance.

EDITED

want to show / hide div with the className="showhidediv" if the checkbox is selected or not.

import React from 'react'; import ReactDOM from 'react-dom'; import DocumentTitle from 'react-document-title'; import { UserProfileForm } from 'react-stormpath'; import Calendar from '../components/Calendar'

export default class PatientPage extends React.Component {     render() {
    return (
       <DocumentTitle title={`PvSafety - D Patient`}>
    <div className="container-fluid">
        <div className="row">
            <div className="col-xs-12">
                <h3>D Patient</h3>
                <hr />
            </div>
        </div>
        <div className="container-fluid" id = "dpatientBlock">
            <div className="row">
                <div className="panel panel-default">
                    <div className="panel-heading">
                        <form className="form-inline">
                            <div className="checkbox">
                                <label>
                                    <input type="checkbox" />Pregnant                    

                                </label>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div className="row">
                <form className="form-horizontal" role="form">
                    <div className="col-md-6">
                        <div className="form-group">
                            <label id="id_label_patientnameinitials" htmlFor="id_field_patientnameinitials" className="col-md-6 control-label2">
                                <span className="e2bcode" id="E2BCodes" >D.1</span>Patient (name or initials)              


                            </label>
                            <div className="col-md-4" >
                                <input className="form-control showhidediv" tabIndex="1" id="id_field_patientnameinitials" type="text"  placeholder="maskable" />
                            </div>
                        </div>
                        <div className="form-group">
                            <label id="id_label_gpmedical" htmlFor="id_field_gpmedical" className="col-md-6 control-label2">
                                <span className="e2bcode" id="E2BCodes">D.1.1.1</span>GP Medical                   


                            </label>
                            <div className="col-md-4" >
                                <input className="form-control" tabIndex="1" id="id_field_gpmedical" type="text" placeholder="maskable" />
                            </div>
                        </div>
                        <div className="form-group">
                            <label id="id_label_specialist" htmlFor="id_field_specialist" className="col-md-6 control-label2">
                                <span className="e2bcode" id="E2BCodes">D.1.1.2</span>Specialist                   


                            </label>
                            <div className="col-md-4" >
                                <input className="form-control" tabIndex="1" id="id_field_specialist" type="text" placeholder="maskable"/>
                            </div>
                        </div>

Answer 1

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