Discussion on: Forms in React

[Alex Spieslechner]

life's easier if you just use a single state object for your whole form, and a changeHandler that uses es6 dynamic properties. the switch and custom useStates get annoying real quick.

not the best way to approach formstate

[Michael Marc-Arthur PIERRE]

A link so i can learn more about this other approach please?

[Alex Spieslechner]

a simple example, to get you started

const [formState, setFormState] = useState();

const handleChange = (event) => {
  setFormState(previousState => ({
    ...previousState,
    [event.target.name]: event.target.value
  }));
}

this will allow you to implicitly handle change for any form input, via its name attribute.
note that for fields that dont use value (like checkboxes) you'll have to do some more handling

you can also pass in a default state to the useState, or type it in typescript like that.

type FormState = {
  name: string;
  address: string;
}
const [formState, setFormState] = useState<FormState>(defaultState)

[Michael Marc-Arthur PIERRE]

Aw ok thanks for replied

[EidorianAvi]

Thanks for taking the time to read the article! I understand where you're coming from but opted for this approach purely by preference.

I appreciate your input.