title: onClick change from class to function
body: <p>In offical react tutorial they first write class component:</p>
  <pre><code>class Square extends React.Component {
   render() {
     return (
       &lt;button className=&quot;square&quot; onClick={() =&gt; this.props.onClick()}&gt;
         {this.props.value}
       &lt;/button&gt;
     );
   }
  }
  </code></pre>
  <p>and then make it a function component</p>
  <pre><code>function Square(props) {
    return (
      &lt;button className=&quot;square&quot; onClick={props.onClick}&gt;
        {props.value}
      &lt;/button&gt;
    );
  }
  </code></pre>
  <p>Why is the onClick change necessary i.e why did we remove the arrow function?</p>
  <p>In the first case when we remove the arrow function i.e just keep this.props.onClick() the event happens every time the square renders without even clicking the button and why is it so?
  ps:I am new to react js , got these doubts when following the tutorial,it would be great if you could give a elaborate answer and any further resources that could help!!thanks in advance.</p>