Creating Subforms with Formik and Yup in React
<h2>Introduction</h2>
<p>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</p>
<ul>
<li>Handling form state</li>
<li>Handling form validation and errors</li>
<li>Handling form submission</li>
</ul>
<p>You can check the docs for more information about the library on <a href="https://jaredpalmer.com/formik">Formik</a></p>
<p>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.</p>
<p>More on Yup here in the docs <a href="https://www.npmjs.com/package/yup">Yup</a>.</p>
<p>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.</p>
<p>There is a code sandbox of the form we are going to build here: <a href="https://codesandbox.io/s/formik-yup-subform-t1070" target="_blank" rel="noopener">Formik Subform Demo.</a></p>
<p> </p>
<h2>Prerequisites</h2>
<ul>
<li>This lab assumes that you have a working knowledge of React</li>
<li>Ensure you have npm, node installed in your environment</li>
<li>You should have some idea about how to create forms with Formik.</li>
</ul>
