title: Why a function in react is getting called three times when I am calling only one time
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const NewApp = (props) =&gt; {
    const [ counter, setCounter ] = useState(0)
    const incrementCounterByOne = () =&gt; setCounter(counter + 1)
    const decrementCounterByOne = () =&gt; setCounter(counter - 1)
    const setCounterToZero = () =&gt; setCounter(0)
  
    return (
      &lt;div&gt;
      &lt;Display counter={counter} /&gt;
      &lt;Button handleClick={incrementCounterByOne} text="Increment" /&gt;
      &lt;Button handleClick={decrementCounterByOne} text="Decrement" /&gt;
      &lt;Button handleClick={setCounterToZero} text="Reset" /&gt;
      {/* &lt;button onClick={incrementCounterByOne}&gt;Increment&lt;/button&gt;
      &lt;button onClick={decrementCounterByOne}&gt;Decrement&lt;/button&gt;
      &lt;button onClick={setCounterToZero}&gt;Reset&lt;/button&gt; */}
      &lt;/div&gt;
    )
  }
  
  const Button = (props) =&gt; {
    console.log("clicked")
    return (
      &lt;button onClick={props.handleClick}&gt;
      {props.text}
      &lt;/button&gt;
    )
  }</code></pre>
  </div>
  </div>
  </p>
  <p>I am a newbie in react. When I am clicking on any button the button function is getting called three times but I am only clicking on one button at a time. I am a little confused on why so. If anyone can explain the process of how this is happening it be very helpful thank you!
  <a href="https://i.stack.imgur.com/f51vs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f51vs.png" alt="React rendered webpage with console log" /></a></p>