reactjs - Can't understand why I can't access the value of counter

Question

Why does the conditional statement inside handleDecrement if(counter>1) not work?

const [counter, setCounter] = React.useState(1);

function handleIncrement (counter){
  setCounter(counter => counter + 1)
}
function handleDecrement (counter){
  if(counter>1){
    setCounter(counter => counter - 1)
  }
}

question from:https://stackoverflow.com/questions/65843995/cant-understand-why-i-cant-access-the-value-of-counter

Answer 1

You're not calling these function inside setCounter, you're just passing arrow function definitions and not the calculated value of the counter, so then inside the if statement, you're comparing not the integer with integer, but a function definition with an integer.

Fixed code:

const [counter, setCounter] = React.useState(1);

function handleIncrement(counterArg) {
  setCounter(counterArg + 1)
}

function handleDecrement(counterArg) {
  if (counterArg > 1) {
    setCounter(counterArg - 1)
  }
}