Discussion on: React - You might not need that many states!

[Lou Cyx]

It can be improved a little bit using FormData:

const submitHandler = event => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);

    // You can send formData to the back-end using fetch.
    // It arrives there as an object { data1: value1, data2: value2, data3: value3 }
};

const MyComponent = () => (
    <form onSubmit={submitHandler}>
        <input name="data1" />
        <input name="data2" />
        <input name="data3" />
        <button type="submit">submit</button>
    </form>
);

The good thing about using the platform that way, is that you can transfer that knowledge anywhere, not just React. You can literally use that same submitHandler in every library or framework out there (the philosophy that Remix has).

Cheers!

[OssiDev]

I always prefer this over controlled inputs. Less code, better performance.