Gain insights into creating robust React forms with Formik. Delve into managing form states, validation with Yup, and handling submissions to build scalable, efficient forms.

Write React Forms Like A Pro With Formik.png

react.tar.gz

React-with-watcher

React-without-watcher

react-app-template

This course focuses on Formik, a JavaScript library for building forms in React. The ability to handle form data is crucial in modern web development, and Formik simplifies the process by allowing you to create forms with less code. You'll learn how to leverage Formik to create complex and straightforward forms with ease.

You'll start with the basics of Formik and gradually work your way up to more advanced topics. You'll learn how to create form fields, handle validation, manage form states, and submit forms. You'll also learn how to use Formik with other popular libraries like Yup for more advanced validation scenarios. 

By the end of this course, you'll be able to create robust and scalable forms in React using Formik. You'll have a deep understanding of how to manage form states, handle form submissions, and validate user input. Data collection is a key element in information technology and will enable you to build better, more organized forms with less code.

Writing React Forms Like a Pro with Formik

Sometimes, we might want to collect a value multiple times, but prior to collecting the values we don't know the exact number of times we want to collect them. For example, if we ask our users to enter the names of their friends, we may not know how many friends they have, so we want to give them the flexibility to add and remove as many friends as they would like. We'll save all the values in a single array. This requires us to do a lot of array manipulation that can quickly get complex. Formik provides a component that helps us easily manipulate arrays—the `FieldArray` component.

# The `FieldArray` component

The `FieldArray` component accepts a `name` prop, which is the key in `initialValues` that has the array we are interested in. Then, like the `Field`  and `Formik` components, the `FieldArray` component gives us access to some helper methods using render props. We will use these methods to do some manipulations on the array.

To see this in action, we'll create a form that will display a field and ask the user to enter a name of a friend. We'll include a button beside the field. When the user clicks the button, another field is shown for the user to add another friend's name. There will also be an add button and a remove button beside this field and subsequent fields.

Learn how to use the FieldArray component to do common array manipulations on a form's state.

Getting Started

Managing the Form State

Validating Forms

Submitting Forms

Assessment: Formik Essentials — From Managing State to Submission

Reducing Boilerplate

Creating Reusable Form Components

Additional Concepts

Final Assessment

Project: Build a Multi-Step Checkout Form with React and Formik

The FieldArray Component