[FIXED] What is the difference between these two function calls?

Issue

Why does onClick={props.onClickFunction(1)}> doest not work ?

Function Button(props) {
  // const handleClick = () => setCounter(counter+1);
    return (
    <button onClick={props.onClickFunction(1)}>
      +{props.increment}
    </button>
  
}

Why should I use another function `

function Button(props) {
  const handleClick = () => props.onClickFunction(1)

return (
    <button onClick={handleClick}>
      +{props.increment}
    </button>
  );
}

`

When I tried declaring handleclick function it's working .

Solution

"Click" is an event so you have to pass an event handler function. When click is detected on the element that handler function will run.

 // you are passing an event handler
 <button onClick={handleClick}>

But in this case onClick={props.onClickFunction(1)}, you are passing the return value of props.onClickFunction function and if this function does ont return anything, its return value will be undefined.

Answered By - Yilmaz
Answer Checked By - - Senaida (ReactFix Volunteer)