title: how to hide or show a div if checkbox is selected in React JS
body: <p>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.</p>
  
  <p>EDITED</p>
  
  <p>want to show / hide div with the className="showhidediv" if the checkbox is selected or not.</p>
  
  <pre><code>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 (
         &lt;DocumentTitle title={`PvSafety - D Patient`}&gt;
      &lt;div className="container-fluid"&gt;
          &lt;div className="row"&gt;
              &lt;div className="col-xs-12"&gt;
                  &lt;h3&gt;D Patient&lt;/h3&gt;
                  &lt;hr /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="container-fluid" id = "dpatientBlock"&gt;
              &lt;div className="row"&gt;
                  &lt;div className="panel panel-default"&gt;
                      &lt;div className="panel-heading"&gt;
                          &lt;form className="form-inline"&gt;
                              &lt;div className="checkbox"&gt;
                                  &lt;label&gt;
                                      &lt;input type="checkbox" /&gt;Pregnant                    
  
                                  &lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="row"&gt;
                  &lt;form className="form-horizontal" role="form"&gt;
                      &lt;div className="col-md-6"&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label id="id_label_patientnameinitials" htmlFor="id_field_patientnameinitials" className="col-md-6 control-label2"&gt;
                                  &lt;span className="e2bcode" id="E2BCodes" &gt;D.1&lt;/span&gt;Patient (name or initials)              
  
  
                              &lt;/label&gt;
                              &lt;div className="col-md-4" &gt;
                                  &lt;input className="form-control showhidediv" tabIndex="1" id="id_field_patientnameinitials" type="text"  placeholder="maskable" /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label id="id_label_gpmedical" htmlFor="id_field_gpmedical" className="col-md-6 control-label2"&gt;
                                  &lt;span className="e2bcode" id="E2BCodes"&gt;D.1.1.1&lt;/span&gt;GP Medical                   
  
  
                              &lt;/label&gt;
                              &lt;div className="col-md-4" &gt;
                                  &lt;input className="form-control" tabIndex="1" id="id_field_gpmedical" type="text" placeholder="maskable" /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label id="id_label_specialist" htmlFor="id_field_specialist" className="col-md-6 control-label2"&gt;
                                  &lt;span className="e2bcode" id="E2BCodes"&gt;D.1.1.2&lt;/span&gt;Specialist                   
  
  
                              &lt;/label&gt;
                              &lt;div className="col-md-4" &gt;
                                  &lt;input className="form-control" tabIndex="1" id="id_field_specialist" type="text" placeholder="maskable"/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>