DEV Community

Handling Forms in ReactJS the right way

Abhishek Agrawal on September 16, 2021

Hello everyone, recently I came across a new way to handle React forms, maybe its something you know, maybe you've been doing this for years and th...

Read full post

dikamilo • Sep 17 '21 • Edited

Is better to use prevState argument when chaning state based of previous state because setState is asynchronous and may cause unstable updates.

setFormData((prevState) => {
    return {
        ...prevState,
        [e.target.name]: e.target.value
    }
});

or in more short form:

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

Abhishek Agrawal • Sep 17 '21

Thank you for the suggestion.

Jérôme Poskin • Sep 18 '21 • Edited

In the second example you forgot to rename your handlers to handleChange. This could be confusing for newbies.
Anyway it's a good start, but as some others told you, you should rely on form libraries. I tested a lot of them and I kind of like final-form for building big forms and reusable fields, then I would recommend you Yup for the validation. The latter is working pretty well with any form library by the way.

dikamilo • Sep 18 '21

Formik + Yup is very good combo.

Jérôme Poskin • Sep 18 '21

Yes I used Formik before but got issues with null values and complex forms. I didn't encountered any of those issues with final-form which I'm using in production for a year now

Abhishek Agrawal • Sep 18 '21

Thanks for pointing it out, I've updated it.
I totally agree that third party libraries are excellent way of handling React forms.
I just found about this way and thought it was pretty neat.

Evan Winter • Sep 16 '21

Nice – a couple things I had to tweak to get working, though:

<input /> elements need names like name="username", otherwise the change handler doesn't know which state value to update
const handleChange(e){} needs to either be const handleChange = (e) => {} or function handleChange(e){}