Building forms in React can be tedious and error-prone. Handling user input, validation, and submission requires a lot of boilerplate code. This is where Formik steps in – it provides an elegant way to manage forms by handling common tasks like getting values, validation, and errors. Combined with Yup validate for validation, creating advanced React forms becomes a breeze.
In this article, we’ll explore advanced techniques for creating better React forms leveraging Formik and Yup validate. We’ll go through practical examples to showcase powerful features like:
- React Form validation with Yup validate
- Dynamic forms with arrays and objects
- Handling form submission
- Integration with React Query
These examples demonstrate real-world use cases you can apply to build reactive web apps with complex forms. Let’s dive in!
Robust Form Validation with Yup validate
For validation, Formik integrates seamlessly with Yup validate – a JavaScript schema builder. It allows you to create validation schemas declaratively instead of imperatively checking values.
Here is an example signup form schema:
import * as yup from 'yup'; const schema = yup.object().shape({ firstName: yup.string().required(), age: yup .number() .positive() .integer() .required(), website: yup.string().url(), });
Yup supports a wide range of validation techniques like:
- Presence checks –
required()
,nullable()
- Number/string validation –
max(),
min(),
length()` - Custom validators with
test()
- And much more
This eliminates clutter and makes forms more readable.
To integrate with Formik:
import { Formik } from 'formik'; const MyForm = () => ( <Formik validationSchema={schema} onSubmit={values => { // submit form }} > {/* Form */} </Formik> )
Formik will automatically run validation on submit and populate any errors.
Dynamic Forms with Arrays/Objects
Dealing with dynamic nested structures like arrays and objects in forms can be difficult. Formik provides FieldArray
and Field
components to make this easier.
For example, consider a “friends list” form that allows adding/removing friends:
const FriendListForm = () => ( <Formik initialValues={{ friends: [] }} onSubmit={values => { // submit form }} > {({ values }) => ( <Form> <FieldArray name="friends" render={arrayHelpers => ( <div> {values.friends.map((friend, index) => ( <div key={index}> <Field name={`friends[${index}]`} /> <button type="button" onClick={() => arrayHelpers.remove(index)} > X </button> </div> ))} <button type="button" onClick={() => arrayHelpers.push('')} > Add Friend </button> </div> ))} </FieldArray> <button type="submit">Submit</button> </Form> )} </Formik> );
The FieldArray
component provides convenient helpers like push
, pop
, remove
to manipulate the array.
You can build complex multi-step wizards leveraging these capabilities.
Handling Form Submission
Formik gives you multiple options for handling form submission:
1. Submit Handler
Pass an onSubmit
handler to get submitted values:
<Formik onSubmit={values => { // submit form }} >
This works for basic cases like submitting directly to an API.
2. Submit Prop
For more control, use the submit prop:
<Formik> {formik => ( <form onSubmit={formik.submitForm}></form> )} </Formik>
Allows accessing Formik state before submitting.
3. Imperative Submits
Call submitForm
imperatively:
import { useFormikContext } from 'formik'; const MyComponent = () => { const { submitForm } = useFormikContext(); const handleClick = () => { submitForm(); } return ( <button onClick={handleClick}>Submit</button> ) }
This increases flexibility to trigger submission from anywhere.
Integrating with React Query
An excellent Formik companion is React Query – it takes care of remote data management.
Here is an example integration:
import { useMutation } from 'react-query'; function MyForm() { const { mutate } = useMutation(data => { return postToAPI(data); }); return ( <Formik onSubmit={(values, actions) => { mutate(values, { onSuccess: () => { actions.resetForm() } }) }} > {/* Form */} </Formik> ); }
On submit, we call the React Query mutate function and reset form state on success. This simplifies data updates!
React Query handles caching, refetching, error handling and more.
There are many creative ways to leverage Formik React ecosystem libraries like React Query, React Router, Redux and Testing Library.
Conclusion
So that wraps up some advanced form techniques with Formik! Its extensive feature set and integration capabilities make building complex reactive forms a joy. A Formik + Yup combo supercharges form handling in React.
Reach Out to the Experts
Got a web project idea? Let’s talk! I specialize in crafting high-quality React and JavaScript applications leveraging such modern technologies. With over a decade of collective experience, i build robust and scalable web apps optimized for performance, security and scale.
Related Articles
March 6, 2024
Setup WhatsApp Business API with Meta: A Step-by-Step Guide
Learn how to seamlessly integrate WhatsApp Business API with Meta, unlocking…
February 29, 2024
Power of React Lazy Loading for React Performance
React lazy loading defers the loading of non-essential components and assets…
February 28, 2024
Unleashing the Power of React Code Splitting
React code splitting improves page load times by splitting code into separate…