1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Simplify and Convert a Traditional React Form to Formik

    Devan BeitelDevan Beitel
    reactReact
    javascriptJavaScript

    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!

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss