title: Dynamically changing react-modal content
body: <p>I have problem with react-modal. I have list of <code>SingleElement</code> and after click it should appear modal window with more details of clicked element. JSON with data is stored as state and from the inside of Modal I can't find way to get desired element.</p>
  
  <p>Here's the modal inside <code>render()</code> function:</p>
  
  <pre><code>        &lt;Modal
              isOpen={this.state.modalIsOpen}
              onAfterOpen={this.afterOpenModal}
              onRequestClose={this.closeModal}
              chosenBeer={this.state.chosenBeer}
          &gt;
              &lt;h2&gt; == Dynamically changing title of element == &lt;/h2&gt;
              &lt;button onClick={this.closeModal}&gt;X&lt;/button&gt;
              &lt;img src="{ == Dynamically changing image == }" /&gt;
          &lt;/Modal&gt;
  
          &lt;div id="splashElements"&gt;
          {
              this.state.elements &amp;&amp;
              this.state.elements.map((item, index) =&gt; {
                  return(&lt;SingleElement key={index} name={item.name} href={item.href} image={item.image_url} tagline={item.tagline} onDelete={id =&gt; this.onDelete(index)} openModal={elementId =&gt; this.openModal(index)}/&gt;)
              })
          }
          &lt;/div&gt;
  </code></pre>
  
  <p>And here are methods responsible for showing/hiding modal window:</p>
  
  <pre><code>openModal = (beerId) =&gt; {
      this.setState({modalIsOpen: true, chosenBeer: this.state.beers[beerId]});
  }
  
  afterOpenModal = () =&gt;{
      // references are now sync'd and can be accessed.
  }
  
  closeModal = () =&gt; {
      this.setState({modalIsOpen: false});
  }
  </code></pre>