title: Why button click event triggered automatically on page load - React.js
body: <p>The following is the sample code written in <code>React.js</code>. </p>
  
  <blockquote>
    <p>I am aware that passing the function to <code>onClick</code> event instead of
    calling the function can resolve this issue.</p>
  </blockquote>
  
  <p>But what I can't understand is why <code>onClick</code> event is triggered on page load itself and prompting the alert by invoking the <code>handleRemoveAll()</code> method. Is this due to <code>this.handleRemoveAll()</code> is invoked at the <code>global</code> context? I am trying to understand how <code>react.js</code> works.</p>
  
  <pre><code>class IndecisionApp extends React.Component {
    render() {
        const options = ['One', 'Two', 'Three'];
        return (
          &lt;div&gt;
              &lt;Options options={options}/&gt;
          &lt;/div&gt;
        )
    }
  }
  class Options extends React.Component {
      handleRemoveAll() { 
          alert('Are you sure you want remove all?');
      };
      render() {
         return (
              &lt;div&gt;
                  &lt;button onClick={this.handleRemoveAll()}&gt;Remove All&lt;/button&gt;
                  {
                      this.props.options.map((option) =&gt; &lt;Option key={option} optionText={option} /&gt;)
                  }
              &lt;/div&gt;
          )
      }
  }
  ReactDOM.render(&lt;IndecisionApp /&gt;, document.getElementById('app'));
  </code></pre>