title: Pass onClick handler and prevent default behavior of button in React
body: <p>I am new to React/Next development. I have the code below:</p>
  <pre><code>import React from &quot;react&quot;;
  
  const Car = () =&gt; {
    var carCounter = 0;
  
    function addCar(event) {
      event.preventDefault();
      carCounter++;
      console.log(carCounter);
    }
  
    return (
      &lt;form&gt;
        &lt;span className=&quot;car&quot;&gt;
          &lt;button class=&quot;big-button&quot; onClick={addCar()}&gt;
            Add Car
          &lt;/button&gt;
        &lt;/span&gt;
      &lt;/form&gt;
    );
  };
  
  export default Car;
  </code></pre>
  <p>Obviously, this code is simplified. The root of my error was that the form was submitting when I pressed the button. However, the purpose of the button was to not &quot;submit&quot; the form. Rather, it was to increment a counter.</p>
  <p>This is the error that was thrown above:</p>
  <pre><code>TypeError: Cannot read property 'preventDefault' of undefined
  </code></pre>
  <p>I went based of this thread:</p>
  <p><a href="https://stackoverflow.com/questions/39809943/react-preventing-form-submission#:%7E:text=Simply%20add%20onSubmit%3D%7BhandleSubmit,stop%20the%20default%20submission%20behavior">https://stackoverflow.com/questions/39809943/react-preventing-form-submission#:~:text=Simply%20add%20onSubmit%3D%7BhandleSubmit,stop%20the%20default%20submission%20behavior</a>.</p>
  <p>Let me know what I can do!</p>