title: React - click handler on child component with map not working
body: <p>I have 3 react components - a container (SearchBarContainer) and 2x presentational components (PostList &amp; PostItem (child of PostList))</p>
  
  <p>I am trying to attach a click handler to the post item which will bubble up to the SearchBarContainer, here is my code:</p>
  
  <pre><code>class SearchBarContainer extends Component {
  
    selectPost(post) {
      console.log('cliked');
      //this.props.dispatch(selectPost(post));
    }
  
    render() {
  
      return (
  
          &lt;div&gt;
            &lt;div className="center-xs"&gt;
              &lt;p&gt;To get started, type in some keywords below&lt;/p&gt;
            &lt;/div&gt;
  
            &lt;SearchBar onTermChange={this.props.actions.loadPosts} onNull={this.props.actions.nullPosts}/&gt;  
            &lt;PostList posts={this.props.posts} isFetching={this.props.isFetching} onClick={this.selectPost}/&gt;
  
          &lt;/div&gt;
  
      );
    }
  }
  </code></pre>
  
  <p>And here is my postList:</p>
  
  <pre><code>const PostList = (props) =&gt; {
  
    const postItems = props.posts.map((singlePost) =&gt; {
      return &lt;PostItem key={singlePost.id} post={singlePost} onClick={() =&gt; props.onClick}/&gt;
    });
  
    if(!props.isFetching) {
      return (
        &lt;div className="mt2 row list-unstyled" &gt; {postItems}&lt;/div&gt;
      );
  
    } else {
      return (
        &lt;Loader /&gt;      
      );
    }
  
  };
  
  export default PostList;
  </code></pre>
  
  <p>However this click handler isnt working. I notice if I place the click handler on the div that wraps the postItems array then it does work, I think the issue is that the click handler is attached to a mapped item which is wrapped inside a div?</p>
  
  <p>Here is the PostItem function:</p>
  
  <pre><code>const PostItem = (singlePost) =&gt; {
  
    return (
        &lt;div className="col-lg-4 col-md-12 mb2 animated fadeIn"&gt;
          &lt;div className="card rounded"&gt;
            &lt;div className="card-header p1"&gt;
              &lt;h4 className="card-title mt0 h5"&gt;{singlePost.post.title}&lt;/h4&gt;
            &lt;/div&gt;
            &lt;img className="card-img-top img-fluid" src={singlePost.post.thumbnail} alt={singlePost.post.title} /&gt;
            &lt;div className="card-block p1"&gt;
              {/*&lt;p className="card-text"&gt;{singlePost.post.description}&lt;/p&gt;*/}
              &lt;Link to={`/product/${singlePost.post.slug}`} className="btn btn--blue flt--left w100"&gt;View More&lt;/Link&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;    
  
    )
  };
  
  export default PostItem;
  </code></pre>
  
  <p>I think maybe i need the click handler event to go like this:
  Click (PostItem) -> pass via props (PostList) -> pass via props (SearchBarContainer)</p>