how to hide or show a div if checkbox is selected in React JS
<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>