Using React hooks in forms

According to Dan Abramov and lot of users of the React API, Hooks are the future of React. Let's see how we can use them to manage a Form.

We are going to use a very common form to register a user: two inputs an email and a password.

Let's capture our input, for that we are going to create a hook useInput that is going to manage the state of our input. On submit we are going to trigger an alert with the content of our form.

And add some validation, here we are using the Constraint API (see doc).

The Constraint API is currently not totally supported by Internet Explorer. This API allow to mark an input as invalid with the setCustomValidity() method, you need to trigger the display of the message with a call to reportValidity().