title: Dynamic content with React js Modal
body: <p>I want to get dynamic content with React js modal I am using package react-responsive-modal. First I render all the post through map. Now I want when I click the individual post the modal should pop up and show me only that particular post's title and body. Now I can't figure out how to get an individual post in modal. 
  Is it possible to do that via third-party package or I have to make custom modal for that? </p>
  
  <pre><code>import React from 'react';
      import Modal from 'react-responsive-modal';
      import Axios from 'axios';
  
      const styles = {
          fontFamily: 'sans-serif',
          textAlign: 'center'
      };
  
      class App extends React.Component {
          state = {
              posts: [],
              open: false
          };
  
          componentDidMount() {
              let url = 'https://jsonplaceholder.typicode.com/posts';
              Axios.get(url).then(res =&gt; {
                  this.setState({
                      posts: res.data.slice(0, 10)
                  });
                  console.log(res.data.slice(0, 10));
              });
          }
  
          onOpenModal = () =&gt; {
              this.setState({ open: true });
          };
  
          onCloseModal = () =&gt; {
              this.setState({ open: false });
          };
  
          renderPosts() {
              return this.state.posts.map(post =&gt; {
                  return (
                      &lt;div
                          key={post.id}
                          style={{ width: 400, height: 400, backgroundColor: 'orange' }}
                          onClick={this.onOpenModal}
                      &gt;
                          &lt;h1&gt;{post.title}&lt;/h1&gt;
                      &lt;/div&gt;
                  );
              });
          }
  
          renderModal(id, title, body) {
              return this.state.posts.map(post =&gt; {
                  return (
                      &lt;div key={post.id} style={{ width: 400, height: 400, backgroundColor: 'orange' }}&gt;
                          &lt;h1&gt;{post.id}&lt;/h1&gt;
                          &lt;h1&gt;{post.title}&lt;/h1&gt;
                          &lt;p&gt;{post.body}&lt;/p&gt;
                      &lt;/div&gt;
                  );
              });
          }
  
          render() {
              const { open } = this.state;
              return (
                  &lt;div style={styles}&gt;
                      &lt;h2&gt;react-responsive-modal&lt;/h2&gt;
  
                      &lt;div&gt;{this.renderPosts()}&lt;/div&gt;
                      &lt;Modal open={open} onClose={this.onCloseModal} center&gt;
                          &lt;h2&gt;Simple centered modal&lt;/h2&gt;
                          &lt;div&gt;{this.renderModal()}&lt;/div&gt;
                      &lt;/Modal&gt;
                  &lt;/div&gt;
              );
          }
      }
  
      export default App;
  </code></pre>