How to make clickable Header in React

Issue

I am trying to make my Header clickable to navigate to homepage but the code below is not working, I'm sure that there should be a really easy way to do it.

const Header = () => {
  const navigate = useNavigate()

  return (
    <div>
      <h1 className="font-weight-light display-1 text-center" onClick={navigate('/')}>
        The X app
      </h1>
    </div>
  )
}

Solution

React executes navigate('/') on every render (and assigns the results to the onClick prop)

Shouldn't this be onClick={() => navigate('/')} ?

Answered By - Bob Fanger