title: Open modal from another component click in react js
body: <p>I am using the basic component modal component of react - <a href="https://github.com/reactjs/react-modal" rel="nofollow noreferrer">https://github.com/reactjs/react-modal</a></p>
  
  <p>What I am trying to achieve is that I want to open the modal from another parent that has the modal imported.</p>
  
  <pre><code>Parent.js
  &lt;button onClick={() =&gt; this.refs.setState({modalIsOpen: true})}&gt; - THIS BUTTON ELEMENT IS IN ANOTHER COMPONENT
  
  Modal.js
  import React from 'react';
  import ReactDOM from 'react-dom';
  import Modal from 'react-modal';
  
  const customStyles = {
  content : {
  top                   : '50%',
  left                  : '50%',
  right                 : 'auto',
  bottom                : 'auto',
  marginRight           : '-50%',
  transform             : 'translate(-50%, -50%)'
  }
  };
  
  class App extends React.Component {
   constructor() {
   super();
  
   this.state = {
    modalIsOpen: false
   };
  
   this.openModal = this.openModal.bind(this);
   this.afterOpenModal = this.afterOpenModal.bind(this);
   this.closeModal = this.closeModal.bind(this);
  }
  
  openModal() {
   this.setState({modalIsOpen: true});
  }
  
  afterOpenModal() {
   // references are now sync'd and can be accessed.
   this.subtitle.style.color = '#f00';
   }
  
  closeModal() {
   this.setState({modalIsOpen: false});
  }
  
  render() {
   return (
    &lt;div&gt;
      &lt;button onClick={this.openModal}&gt;Open Modal&lt;/button&gt;
      &lt;Modal
        isOpen={this.state.modalIsOpen}
        onAfterOpen={this.afterOpenModal}
        onRequestClose={this.closeModal}
        style={customStyles}
        contentLabel="Example Modal"
      &gt;
  
        &lt;h2 ref={subtitle =&gt; this.subtitle = subtitle}&gt;Hello&lt;/h2&gt;
        &lt;button onClick={this.closeModal}&gt;close&lt;/button&gt;
        &lt;div&gt;I am a modal&lt;/div&gt;
        &lt;form&gt;
          &lt;input /&gt;
          &lt;button&gt;tab navigation&lt;/button&gt;
          &lt;button&gt;stays&lt;/button&gt;
          &lt;button&gt;inside&lt;/button&gt;
          &lt;button&gt;the modal&lt;/button&gt;
        &lt;/form&gt;
      &lt;/Modal&gt;
    &lt;/div&gt;
  );
  }
  }
  
  export default App
  </code></pre>
  
  <p>I have read that this can be done using refs and changing the state of the  modal. What exactly am I doing wrong here?</p>
  
  <p>Thanks!</p>