Simplify and Convert a Traditional React Form to 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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!