Creating Subforms with Formik and Yup in React
Introduction
Sometimes managing forms in React can be very boring and repetitive. Formik is a library that helps with the wearisome task of form handling, which are
Handling form state
Handling form validation and errors
Handling form submission
You can check the docs for more information about the library on Formik
Yup is a JavaScript object schema validator and object parser. In this context, Yup simply helps handle validation. Formik seamlessly integrates with Yup and that is why it is an obvious choice for validation when using Formik.
More on Yup here in the docs Yup.
There are often cases where you want to reuse a form as part of another form(subform) and Formik does not have a way to do that easily. This article will explain how to build subforms and handle form validation with Formik, Yup and Reactstrap.
There is a code sandbox of the form we are going to build here: Formik Subform Demo.
Prerequisites
This lab assumes that you have a working knowledge of React
Ensure you have npm, node installed in your environment
You should have some idea about how to create forms with Formik.
