Simplify and Convert a Traditional React Form to Formik

Validate React Forms with Formik and Yup

Building Forms with React and Formik

Forms in React are not easy. They are verbose and several lines of code. However, forms with Formik are much simpler. Formik maintains the state of inputs and simplifies the form so you can work quicker!

Instructor: [00:00] Here, we have a standard React form with an onSubmit and onChange handler. Let's add an item. Forms in raw React are verbose. Let's simplify this form with Formik. Install Formic, form, and field from Formik.

[00:21] Remove our state and change handlers, wrap our current form with Formik, add an onSubmit handler to our Formik form. The contents of that are our current onSubmit handler. Remove the old onChange value, and change this.state.value to be values.item.

[00:44] Change our form tag, and remove the onSubmit handler. Replace our input with a field, remove onChange and value, change our input of type submit to be a button. In review, we've converted our form to use Formik.

[01:04] Formik handles the onSubmit for the form in onChange for each input automatically when using the form and field components, respectively. It then passes the values onSubmit in a standard object, where the key is the name or ID of the input, and the value is the user's inputted value.

Course

Building Forms with React and Formik

Simplify and Convert a Traditional React Form to Formik

Share this video with your friends