title: React. onClick event not firing
body: <p>In my navbar, I have a button that will display a submenu (list of items) when clicked. Each item is their own child component and when clicked I want them to fire an event. The onClick event listener is not responding at all. However, other mouse events do apply (onMouseEnter, onMouseOut etc). Anyone might know what's up?</p>
  
  <p>Child Component: NotificationItem.js</p>
  
  <pre><code>import React from "react"
  import { connect } from "react-redux"
  import { updateNotification } from "../../actions/notificationActions"
  
  class NotificationItem extends React.Component{
  constructor(props){
      super(props)
  
      this.handleOnClick = this.handleOnClick.bind(this)
  }
  
  handleOnClick = (event) =&gt; {
      console.log("clicked")
      // let notificationId = this.props.notification._id
      // this.props.updateNotification(notificationId)
  }
  
  render(){
      let {avatar, description, seen} = this.props.notification
      return(
          &lt;div
              onClick={this.handleOnClick}
              className="d-flex notification-wrapper" 
              style={ seen ? (
                  { width: "250px", whiteSpace: "normal", padding: "0.5rem" } 
                  ):( { width: "250px", whiteSpace: "normal", padding: "0.5rem", backgroundColor: "#d7e2f4" }
                  )
              }
              &gt;
              &lt;div&gt;
                  &lt;img src={avatar} style={{ width: "25px"}} className="mr-2 rounded-circle"/&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  {description}
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Parent component: NotificationFeed.js</p>
  
  <pre><code>import React from "react"
  import { connect } from "react-redux"
  import NotificationItem from "./NotificationItem"
  
  class NotificationFeed extends React.Component{
  constructor(props){
      super(props)
  }
  
  render(){
      let notifications = this.props.notification.notifications
      return(
          &lt;div className="dropdown-menu"&gt;
              {notifications.map((notification, index) =&gt; {
                  return(
                      &lt;div key={index}&gt;
                          &lt;NotificationItem notification={notification}/&gt;
                      &lt;/div&gt;
                  )
              })}         
          &lt;/div&gt;
      )
  }
  }
  
  const mapStateToProps = (state) =&gt; {
  return{
      notification: state.notification
  }
  }
  
  export default connect(mapStateToProps)(NotificationFeed)
  </code></pre>
  
  <p>Edit: Something I noticed that might be of help. I'm using a bootstrap class to create this dropdown toggle-effect. When clicking on one of the items, the submenu closes immediately, without firing my desired event handler on the component.</p>
  
  <pre><code>                &lt;span className="dropdown" id="notifications-dropdown"&gt;
                  &lt;Link to="#" className="nav-link text-light dropdown-toggle" data-toggle="dropdown"&gt;
                      &lt;span 
                          key={Math.random()}
                      &gt;
                          &lt;i className="fa fa-bell"&gt;&lt;/i&gt;
                      &lt;/span&gt; { windowWidth &lt; 576 &amp;&amp; "Notifications"}
  
                      &lt;NotificationFeed/&gt;
  
                  &lt;/Link&gt;
                  &lt;/span&gt;
  </code></pre>