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

# What is a radio group?
A **radio group** is used when we want our users to select an option from a group of options (represented by radio buttons) in which only one button can be checked at a time.

Similar to the `InputField` and `Textarea` components, the `RadioGroup` component needs a `label` prop and a `name` prop. In addition, it needs an `options` prop. This is an array of the possible options a user can select. Each element in the array should be an object that gives the label of the option and the value of that option.

The label and value of an option should not be confused with the label and value of the component itself. Let's use the image above to understand the difference. 

The label of the radio group component is "Select an option." In the component, there are three options. The label of each option is the text that is displayed to the user just beside the circle icon. The label for the first option is "Option 1" and the label for the second option is "Option 2."

The value of an option is what we'll normally use in the submission logic. Sometimes the label and value are the same, and other times, they are not. Sometimes, an option is represented by a number or an ID. We don't want to show the user the number or the ID, and in this case, the label for the option will be a text that the user can understand while the value is the ID or the number, which we'll use in the submission logic.

Therefore, the value of the component is the value of the selected option. That is, if the option with the label "Option 1" is selected, then the value of the component is the value of that option.


Learn how to create a reusable RadioGroup component with React and Formik.

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 RadioGroup Component

What is a radio group?