title: Detecting an element being click using the onClick function
body: <p>I'm debugging my code in react and I have an element that isn't behaving as I expected.  </p>
  
  <p><code>&lt;li onClick={console.log('li element clicked')}&gt;Hello&lt;/li&gt;</code></p>
  
  <p>I simply want to detect if a particular element is clicked and I expect when I click this li element, it should log the message "li element clicked" in my console. However, this doesn't seem to be the case. Please help?</p>
  
  <hr>
  
  <p>Somehow, by using bind(this) fixes my problem, however, I don't fully understand why.</p>
  
  <p>Here's the code sample:</p>
  
  <pre><code>export class InputQuestion extends React.Component{
  constructor(props) {
      super(props)
      this.state = {
          value: '',
      };
  }
  
  handleClick = () =&gt; {
      console.log('li 1 clicked');
  }
  
  render(){
      return (
          &lt;Container&gt;
              &lt;li onClick={this.handleClick.bind(this)}&gt;Hi&lt;/li&gt;
              &lt;li onClick={console.log('li 2 clicked')}&gt;Hello&lt;/li&gt;
          &lt;/Container&gt;
      )
  }
  </code></pre>
  
  <p>}</p>