title: Modal isn't opening as expected
body: <pre><code>class Posts extends 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() {
          console.log("got here?")
          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() {
          const keys = generateKey(new Date().getTime())
          var dictionary = this.props.posts
          const postItemsArr = Object.keys(dictionary).map(post=&gt;dictionary[post])
          const number = 0
          const postItems = postItemsArr.map(
              post=&gt;(
                  &lt;Jumbotron  key={generateKey(post.positiontitle) + generateKey(post.businessId)} &gt;
                      &lt;div className="position"&gt;{post.positiontitle}&lt;/div&gt;&lt;br&gt;&lt;/br&gt;
                      &lt;BusinessName businessnameType={post.businessname} /&gt;&lt;br&gt;&lt;/br&gt;
                      &lt;JobDescription jobDescription={post.description_sanitized} /&gt;&lt;br&gt;&lt;/br&gt;
                      &lt;p&gt;
                          &lt;Modal isOpen={this.state.modalIsOpen}
                              onAfterOpen={this.afterOpenModal}
                              onRequestClose={this.closeModal}
                              style={customStyles}
                              contentLabel="Example"
                          &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;button onClick={this.openModal}&gt;Open Modal&lt;/button&gt;
                      &lt;/p&gt;
                  &lt;/Jumbotron&gt; 
              )
          )
          return (
              &lt;div&gt;
                  &lt;h1&gt; Jobs Listings &lt;/h1&gt;
                  {postItems }
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Inside my Jumbotron, my modal doesn't seem to be opening, why?</p>
  
  <p>It looks like it gets to the state  openModal()</p>
  
  <p>but doesn't actually open the modal when the user clicks on</p>
  
  <pre><code>&lt;button onClick={this.openModal}&gt;Open Modal&lt;/button&gt;
  </code></pre>
  
  <p>Also; should I create a separate component called Modal; what would be best practices? </p>
  
  <p>Overall I'm trying to trigger the modal object for a respective list item in the list.</p>