title: React, add onClick event on dynamically loaded div element.
body: <p>Currently on my react app, I am loading many div's which is being dynamically loaded with info from a database. I am trying to make it so when I click on one of these div's a Pop-up emerges, with more in depth data related to that div. However, it does not seem to work as expected. The onClick does not work with this dynamically loaded div. I tried testing the pop-up on a standard button element on my main App component and it worked. Here is my code:</p>
  
  <pre><code>class ResultBox extends Component {
    constructor(props){
    super(props);
    this.state = {
      showPopup: false,
      posts: []
    };
  }
    togglePopup() {
      this.setState({
      showPopup: !this.state.showPopup
    });
   }
     componentDidMount() {
      axios.get('http://localhost:3001/api/events')
        .then(res =&gt; {
        let posts = res.data.map(obj =&gt; obj);
        this.setState({posts});
        console.log(posts);
       });
    }
    render() {                 ********** Below here is where my issue is *****
      return (
        this.state.posts.map(events =&gt;
        &lt;div key={events.key} 
          className='result_box' 
          onClick={this.togglePopup.bind(this)}&gt;
  
         &lt;p&gt;{events.name}&lt;/p&gt;
          {events.place &amp;&amp; events.place.location &amp;&amp; &lt;p&gt;
          {events.place.location.city}&lt;/p&gt;}
          &lt;/div&gt;
       )
           {this.state.showPopup ?
             &lt;Result
             text='Close Me'
             closePopup={this.togglePopup.bind(this)}
            /&gt;
           : null
          }
      );
   }
   }
  </code></pre>
  
  <p>And this ResultBox is being rendered in App</p>
  
  <pre><code> class App extends Component {
  
   render() {
     return (
        &lt;div className="App"&gt;
          &lt;NavBar className="navbar-body"/&gt;
          &lt;div className="spacer"&gt;&lt;/div&gt;
          &lt;p className="App-intro"&gt;
             Find a jam
           &lt;/p&gt;
        &lt;ResultBox /&gt;
  
       &lt;/div&gt;
     );
   }
  }
  </code></pre>
  
  <p>The Result is simply the pop-up box component. If anyone knows how I can get this to work it would be much appreciated. </p>