0

So here is my code for that part which is correct, by the way:

function Form() {
   const [text, setText] = useState("");
   function handleSubmission(e) {
      e.preventDefault();
   }

   return (
      <form className="the-form" onSubmit={handleSubmission}>
       ....

My question is, why can I write onSubmit={handleSubmission()} instead? I thought that function is called whenever a submission is made?

Edit: So this question is about asking why we have to pass the name of the function in the onSubmit attribute, rather than making a function call in it.

yasuo
  • 16
  • 4
  • 1
    *"why can I write onSubmit={handleSubmission()} instead?"* - Well, what happens when you do that? I suspect you'll observe that the function is called immediately rather than when the form is submitted. There's nothing syntactically "wrong" about either way, they just do two different things. – David Jun 19 '23 at 19:59
  • 1
    Main differences between `onSubmit={handleSubmission()}` and `onSubmit={handleSubmission}` When the syntax is `onSubmit={handleSubmission()}` it will execute handleSubmission immediately once the component render When the syntax is `onSubmit={handleSubmission}` it will save the reference to that function and it will executed when you click submit – Yuu Jun 19 '23 at 20:02
  • 1
    what onSubmit do is that it calls the function written in parenthesis but if u do it write like this `onSubmit={handleSubmission()}` this will not work because onSubmit job is to call a function, so u don't have to add these brackets and call the function again although it will throw an error but still don't do that. – Mahad Ali Jun 19 '23 at 20:03
  • Thank you guys very much! So it accepts a function as the argument, rather than executing the function there – yasuo Jun 19 '23 at 20:06

0 Answers0