I have a React form that has two submit buttons that hit two different endpoints with Axios.

When I try to grab the form submitter's value (which endpoint to hit), I get the following error when using React with TS.

Property 'submitter' does not exist on type 'Event'

My code is as follows:

  async function handleSubmit(e: React.SyntheticEvent<HTMLFormElement>) {
    const submitter = e.nativeEvent.submitter.value;

    e.preventDefault();
    checkedBox.length > 0 &&
      (await axios
        .post(
          `${process.env.REACT_APP_BACKEND_BASE}/update${submitter}tasks`,
          checkedBox
        )
        .then((response) => {
          if (response.status === 200) {
            setForceUpdate((current) => (current += 1));
          }
        })
        .catch((error) => {
          console.log(error);
        }));
  }

If I change the function type to (e: React.BaseSyntheticEvent) another error pops up on the onSubmit attribute.

      <form onSubmit={handleSubmit}>

The error is:

Type '(e: BaseSyntheticEvent<HTMLFormElement, any, any>) => Promise' is not assignable to type 'FormEventHandler'. Types of parameters 'e' and 'event' are inpatible. Type 'FormEvent' is not assignable to type 'BaseSyntheticEvent<HTMLFormElement, any, any>'. Types of property 'nativeEvent' are inpatible. Type 'Event' is missing the following properties from type 'HTMLFormElement': acceptCharset, action, autoplete, elements, and 294 more.ts(2322)

I have a React form that has two submit buttons that hit two different endpoints with Axios.

When I try to grab the form submitter's value (which endpoint to hit), I get the following error when using React with TS.

Property 'submitter' does not exist on type 'Event'

My code is as follows:

  async function handleSubmit(e: React.SyntheticEvent<HTMLFormElement>) {
    const submitter = e.nativeEvent.submitter.value;

    e.preventDefault();
    checkedBox.length > 0 &&
      (await axios
        .post(
          `${process.env.REACT_APP_BACKEND_BASE}/update${submitter}tasks`,
          checkedBox
        )
        .then((response) => {
          if (response.status === 200) {
            setForceUpdate((current) => (current += 1));
          }
        })
        .catch((error) => {
          console.log(error);
        }));
  }

If I change the function type to (e: React.BaseSyntheticEvent) another error pops up on the onSubmit attribute.

      <form onSubmit={handleSubmit}>

The error is:

Type '(e: BaseSyntheticEvent<HTMLFormElement, any, any>) => Promise' is not assignable to type 'FormEventHandler'. Types of parameters 'e' and 'event' are inpatible. Type 'FormEvent' is not assignable to type 'BaseSyntheticEvent<HTMLFormElement, any, any>'. Types of property 'nativeEvent' are inpatible. Type 'Event' is missing the following properties from type 'HTMLFormElement': acceptCharset, action, autoplete, elements, and 294 more.ts(2322)

• javascript
• reactjs
• typescript
• forms

• Is this function the submit method of a form ? – sshmaxime Commented Oct 4, 2022 at 13:05
• It is, I'm using two submit buttons that will route to two different endpoints using Axios. – Metwesh Commented Oct 4, 2022 at 13:06

4 Answers 4

Try using SyntheticEvent and SubmitEvent

const handleSubmit = (event: SyntheticEvent<HTMLFormElement, SubmitEvent>) => {}

Explanation

When we use FormEvent<HTMLFormElement> it expands to:

FormEvent<T = Element>
  SyntheticEvent<T = Element, E = Event>  // notice it hardcodes Event
    BaseSyntheticEvent<E, EventTarget & T, EventTarget> // also hardcodes EventTarget
      target: EventTarget // hardcoded
      nativeEvent: Event  // hardcoded
      currentTarget: HTMLFormElement & EventTarget

So instead of using FormEvent use SyntheticEvent that results in:

SyntheticEvent<T = HTMLFormElement, E = SubmitEvent>
  BaseSyntheticEvent<E, EventTarget & T, EventTarget>
    target: HTMLFormElement //