title: React.js onClick event not firing
body: <h1>Problem</h1>
  <p>I'm trying to understand why my event handler below <strong>navItemClick</strong> isn't firing to the console when an item in the list is clicked. Also, I'm trying to figure out if it's possible to add the onClick event to the NavigationSidebarItem function to reduce repeating it on each item on the return in the NavigationSidebar component.</p>
  <p>The component renders correctly; no errors. I also am able to see the console lines for the constructor as well as the JSX loading successfully. Just no clicky clicky message!</p>
  <h1>Code Example</h1>
  <pre><code>class NavigationSidebar extends React.Component {
      constructor(props) {
          super(props);
          this.navItemClick = this.navItemClick.bind(this);
          console.log('NavigationSidebar:constructor =&gt; success');
      }
  
      navItemClick(event)
      {
          console.log('this.navItemClick: clicked');
      }
  
      render()
      {
          return (
                  &lt;ul&gt;
                      &lt;NavigationSidebarItem description=&quot;Item1&quot; onClick={this.navItemClick} /&gt;
                      &lt;NavigationSidebarItem description=&quot;Item2&quot; onClick={this.navItemClick} /&gt;
                      &lt;NavigationSidebarItem description=&quot;Item3&quot; onClick={this.navItemClick} /&gt;
                  &lt;/ul&gt;
          )
      }
  };
  
  function NavigationSidebarItem(props) {
      return (
          &lt;li&gt;
              &lt;span&gt;{props.description}&lt;/span&gt;
          &lt;/li&gt;
      );
  }
  
  ReactDOM.render(
      &lt;NavigationSidebar/&gt;,
      document.getElementById('navigation-sidebar')
  );
  
  console.log('NavigationSidebar.jsx:loaded =&gt; finished');
  </code></pre>