title: ReactJS- render modal component on onclick event
body: <p>I am trying to add ReactStrap Modal to my NavBar but couldn't find solution to it. I created a handler function which will be called upon click event but I am not able to call my login component on this handler function. I also bind the handler to the current DOM. What i have done is simply called Login component which is not working. Please explain how can I call component form this parent component</p>
  
  <p>Code:
      <strong>login.js</strong></p>
  
  <pre><code>import React from 'react';
  import {
      Button,
      Form,
      FormGroup,
    //  FormText,
      Label,
      Input,
      Modal,
      ModalHeader,
      ModalBody,
      ModalFooter
  } from 'reactstrap';
  
  class Login extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              modal: false
          };
          this.toggle = this.toggle.bind(this);
      }
  
      toggle() {
          this.setState({
              modal: !this.state.modal
          });
      }
  
      render() {
          return (
              &lt;div&gt;
                &lt;Button color="danger" onClick={this.toggle}&gt;{this.props.buttonLabel}&lt;/Button&gt;
                &lt;Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}&gt;
                  &lt;ModalHeader toggle={this.toggle}&gt;Login&lt;/ModalHeader&gt;
                  &lt;ModalBody&gt;
                        &lt;Form&gt;
                            &lt;FormGroup&gt;
                                &lt;Label for="Email"&gt;Email&lt;/Label&gt;
                                &lt;Input type="email" name="email" id="email" placeholder=""/&gt;
                            &lt;/FormGroup&gt;
                            &lt;FormGroup&gt;
                                &lt;Label for="password"&gt;Password&lt;/Label&gt;
                                &lt;Input type="password" name="password" id="password" placeholder=""/&gt;
                            &lt;/FormGroup&gt;
                        &lt;/Form&gt;
                  &lt;/ModalBody&gt;
                  &lt;ModalFooter&gt;
                    &lt;Button color="primary" onClick={this.toggle}&gt;Submit&lt;/Button&gt;{' '}
                    &lt;Button color="secondary" onClick={this.toggle}&gt;Cancel&lt;/Button&gt;
                  &lt;/ModalFooter&gt;
                &lt;/Modal&gt;
              &lt;/div&gt;
            );
      }
  }
  
  export default Login;
  </code></pre>
  
  <p><strong>NavBar.js:</strong></p>
  
  <pre><code>import React from 'react';
  import Login from './login/login';
  import {
      Navbar,
      NavbarBrand,
      NavbarToggler,
      Nav,
      NavItem,
      NavLink,
      Collapse,
      UncontrolledDropdown,
      DropdownMenu,
      DropdownItem,
      DropdownToggle
  } from 'reactstrap';
  
  class NavbarComponent extends React.Component {
      constructor(props) {
          super(props);
  
          this.toggle = this.toggle.bind(this);
          this.state = {
              isOpen: false
          };
          this.handleClick = this.handleClick.bind(this);
  **this.setState={
            isloggedOn: true
          }**
  
      }
  
      stickyNavbar() {
          var Navbar = document.getElementById("Navbar");
          console.log(Navbar);
          var sticky = Navbar.offsetTop;
          if (window.pageYOffset &gt;= sticky) {
            Navbar.classList.add("sticky")
          } else {
            Navbar.classList.remove("sticky");
          }
        }
  
      toggle() {
          this.setState({
              isOpen: !this.state.isOpen
          });
      }
  
      handleClick() {
        **if(this.isloggedOn) {
      return &lt;Login/&gt;;
    }**
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Navbar color="dark" light expand="md"&gt;
            &lt;NavbarBrand href="/"&gt;found-Missing&lt;/NavbarBrand&gt;
            &lt;NavbarToggler onClick={this.toggle} /&gt;
                  &lt;DropdownMenu right&gt;
                    &lt;DropdownItem onClick= {this.handleClick}&gt;
                      Login
                    &lt;/DropdownItem&gt;
                    &lt;DropdownItem href="https://github.com/reactstrap/reactstrap"&gt;
                      Signup
                    &lt;/DropdownItem&gt;
                    &lt;DropdownItem divider /&gt;
                    &lt;DropdownItem&gt;
                      Reset
                    &lt;/DropdownItem&gt;
                  &lt;/DropdownMenu&gt;
          &lt;/Navbar&gt;
              &lt;/div&gt;
          )
      }
  } 
  
  export default NavbarComponent;
  </code></pre>