ReactJS: Too many re-renders in function

Question

I am trying to make a small function, which makes a likable Button. My function should work, but the error I get is too many re-renders (even tough the setState only gets called onClick) Code below:

    function ClickMeToLike(){
  const [isLiked, setIsLiked] = useState(false);

  return (
    <Col><p>
    {
    isLiked ?
    <Icon.Heart onClick={setIsLiked(true)}/> :
    <Icon.HeartFill onClick={setIsLiked(false)}/>
    }
    </p></Col>
  )
}

Answer 1

you need to use an arrow function in your onClick

try this

onClick = {() => setIsLiked(true)}

best practice is to use what the answer above me is though and define a separate function to handle your clicks