title: Open modal from other component in ReactJS
body: <p>Hey I have one question about ReactJS, because I try make modal using <code>react-bootstrap</code> and open it in another component. But nothing happens, please look on my code and give me some advices. I try invoke fuunction from <code>LoginModal</code> component using <code>onClick="LoginModal.handleShow"</code> but this no working.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { 
    Popover,
    Tooltip,
    Modal
  } from 'react-bootstrap';
  
  class LoginModal extends React.Component {
    constructor(props, context){
      super(props, context);
      this.handleShow = this.handleShow.bind(this);
      this.handleClose = this.handleClose.bind(this);
      this.state = {
          show: false
      }
  }
  handleShow() {
      this.setState({ show: true })
  }
  handleClose(){
      this.setState({ show: false })
  }
  render() {
  
      return (
         &lt;div&gt;
            &lt;Modal show={this.state.show} onHide={this.handleClose}&gt;
               &lt;Modal.Header closeButton&gt;
                 &lt;Modal.Title&gt;Modal Heading&lt;/Modal.Title&gt;
               &lt;/Modal.Header&gt;
               &lt;Modal.Body&gt;
                 &lt;h1&gt;This is modal body&lt;/h1&gt;
               &lt;/Modal.Body&gt;
            &lt;/Modal&gt;
          &lt;/div&gt;
      )
    }
  }
  export default LoginModal
  </code></pre>
  
  <p>And App component which is rendered</p>
  
  <pre><code>import React, { Component } from 'react';
  import LoginModal from './components/Login/Login'
  import {
    Navbar, 
    NavItem,
    Nav,
    Button
  } from 'react-bootstrap';
  import {
    BrowserRouter as Router,
    Route,
    Switch,
   } from 'react-router-dom'
  
  class App extends Component {
  
  render(){
      return (
        &lt;Router&gt;
          &lt;div className="menu-bar"&gt;
             &lt;LoginModal&gt;&lt;/LoginModal&gt;
               &lt;Navbar inverse collapseOnSelect&gt;
                 &lt;Nav&gt;
                   &lt;NavItem&gt;
                     &lt;Button onClick={LoginModal.handleShow}&gt;Login&lt;/Button&gt;
                   &lt;/NavItem&gt;
                  &lt;/Nav&gt;
                &lt;/Navbar&gt;
  
                  &lt;Switch&gt;
                      &lt;Route exact path="/" component={Home}/&gt;
                  &lt;/Switch&gt;
              &lt;/div&gt;
          &lt;/Router&gt;
      )
    }
  }
  export default App;
  </code></pre>