CODEWITHSUNDEEP
typescript
Oliver Watkins
Oliver Watkins

Reputation: 13509

Typescript type for form submit event

Supposedly I should use FormEvent for the submit event type in a form.

https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forms_and_events/

However that type does not recognise an array of values. It only recognises a single value (ie. e.target.value and not e.target[0].value).

What type should I use for the submit function in a form so I can iterate over my form values?

import * as React from 'react';
import {ChangeEvent, FormEvent, useState} from "react";

export default function Test() {

    const [input1, setInput1] = useState<string>();
    const [input2, setInput2] = useState<string>();

    return (
        <div>
            {/*//TODO what should 'e' type be??*/}
            <form id="myform" onSubmit={(e: FormEvent<HTMLFormElement>) => {
                e.preventDefault();
                console.log(e.target && e.target.length ? e.target[0].value : "nothing here..")
            }}>
                <input type={"textfield"} id="1" value={input1}
                       onChange={(e: ChangeEvent<HTMLInputElement>) => setInput1(e.target.value)}
                />
                <input type={"textfield"} id="2" value={input2}
                       onChange={(e: ChangeEvent<HTMLInputElement>) => setInput2(e.target.value)}
                />
            </form>
        </div>
    );
}

Upvotes: 36

Views: 52412

Answers (5)

Ooker
Ooker

Reputation: 3032

I'm using Preact, and the type that is suggested by the LSP is JSX.TargetedSubmitEvent<HTMLFormElement>

Upvotes: 0

Chinedu Odo
Chinedu Odo

Reputation: 54

import React from "react";

export default function Test() {
  return (
    <div>
      <form
        id="myform"
        onSubmit={(e: React.FormEvent) => {
          e.preventDefault();
           
        }}
      ></form>
    </div>
  );
}

Upvotes: 2

OZZIE
OZZIE

Reputation: 7348

Latest React the type seems it should be e: SubmitEvent

Upvotes: 8

Loscho19
Loscho19

Reputation: 43

I used this for normal submits.

import { SyntheticEvent } from 'react';

const _onSubmit = (e: SyntheticEvent) => {}

But when i want get the submitter i use this:

const _onSubmit = (e: SyntheticEvent<HTMLFormElement, SubmitEvent>) => {}

Upvotes: 4

CertainPerformance
CertainPerformance

Reputation: 370799

what should 'e' type be??

What you have with FormEvent<HTMLFormElement> is fine - but you can also omit it entirely (which I'd recommend) - there's no need to annotate types that TS can infer automatically. Less code when not necessary often means fewer possibilities of typos, fewer puzzles to solve, and greater readability, when there isn't lots of boilerplate to distract from the core functionality.

It only recognises a single value (ie. e.target.value and not e.target[0].value).

Which is expected - the .target is the element the event was dispatched to, which in this case is the form. It's not an array.

If you want the iterate over all values of the inputs, then either use separate states for them and then just log each state like you're doing currently (and make sure to give the states an initial string value, not an initial undefined value):

const [input1, setInput1] = useState('');
const [input2, setInput2] = useState('');
// ...
console.log(input1);
console.log(input2);

Or, if the number of inputs is dynamic, construct an array of strings for state instead.

const [inputValues, setInputValues] = useState(['']); // start with a single input

// to update the input at index i, like inside a map function in the returned JSX:
(e) => {
  setInputValues(
    inputValues.map((val, j) => j === i ? e.target.value : val)
  )
}

Upvotes: 12

Related Questions