HTML forms can be complex. Rails made them easier by introducing helping methods, such as form_tag, form_for and form_with.

Building forms with React is even more complex. There is a lot to keep track of. It is not enough to just render a form in the DOM. React has to store and update state, validate inputs, and handle form submissions.

So far, we have only dealt with React forms using class inheritance (Class components), vs. object composition (Functional components). Now that React Hooks have allowed us to build our React in a slicker, simpler syntax, is there a better way to create React forms?

Yes.

Formik is a popular React form library that works great with functional components. Its documentation states that it is designed to help with 3 core form complications:

1. Getting values in and out of form state
2. Validation and error messages
3. Handling form submission.

Nitro uses Formik for all its new React forms. So let's learn about it :).

• Formik docs
• Functional vs Class-Components in React