Here’s what I’d like to do:

function handleSubmit(event) {
  event.preventDefault(); // Prevent the default form submission behavior
  console.log('You clicked submit.');
}

function MyForm() {
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

But if I change the return line to:

<form onSubmit={console.log('You clicked submit.')}>

The console.log runs automatically even without submit. Why is this? I am trying to understand how react works. I’m guessing that onsubmit automatically execute all the code within {} on render? Then what happens?