Load React using by on click of a button

Check this example:

Lets say you have 2 component App and Child, and wants to render child component on checking the checkbox, this is called conditional rendering.

app.js file, import file child.js in App component:

import Child from './child';

class App extends React.Component {
    constructor() {
        super();
        this.showComments = this.showComments.bind(this);
        this.state = {
            showComponent: false,
        };
    }

    showComments(e) {
        this.setState({
            showComponent: e.target.checked,
        });
    }

    render() {
           return (
                <div className="add_checkbox">
                   <span>Enable Comments</span>
                   <input className="checkbox" type="checkbox" name="enable_comment" onClick={this.showComments} value="enable_comment"/>
                   {this.state.showComponent ? <Child/>  : null}
                </div>
        )
    }
}

child.js file:

export default class Child extends React.Component{
   render(){
       return(
          <div>Hello</div>
       );
   }
}

ReactDOM.render(<App />, document.getElementById('container'));

Check fiddle for working example: https://jsfiddle.net/ztx9kd1w/

Let me know if you need any help.