Why can't able to call the method directly from the template

Question

Here is my template and code:

const submit = (event: React.MouseEventHandler<HTMLButtonElement>) => {
   console.log("submitted");
};

template:

<input type="password" defaultValue={repass} onChange={(e) => handleChange(e)} placeholder="userPassword Repeat" name="userPasswordRep" />
  <button disabled={isSubmit} onClick={submit(event)}>
    Sign Up{" "}
  </button>

here handleChange works. even the button works if I return using another function. but need know why can't we directly call the submit method from template, what is behind?

getting error and warnings:

'event' is deprecated.ts(6385) Unexpected use of 'event'.

Please search for warnings before asking questions. Read warnings, don't ignore them. And you should learn to recognize the difference between a warning and an error. [I'm trying to call event but my Visual Code say ("event is deprecated ts(6385)")](https://stackoverflow.com/questions/64585035/im-trying-to-call-event-but-my-visual-code-say-event-is-deprecated-ts6385) — Andy Ray, Dec 10 '22 at 05:09
Because that's not html its just javascript objects. for example, ` — Dilshan, Dec 10 '22 at 05:10

score 2 · Answer 1 · answered Dec 10 '22 at 05:13

2

You don't need to call pass the event explicitly here

 <button disabled={isSubmit} onClick={submit}>

which is similar to this

<button disabled={isSubmit} onClick={() => submit(event)}>

answered Dec 10 '22 at 05:13

Sachila Ranawaka

39,756
7
56
80

Yes agree. My doubt is how all this works? how context changes and updates – user2024080 Dec 10 '22 at 05:16

Why can't able to call the method directly from the template

1 Answers1