Day 13: Forms in React (Formik and Yup)

On the thirteenth day, I learned about forms in React, the Fragment tag, and react-icons in the react application.

React-icons

React Icons is a library that provides popular icon packs as React components. It allows developers to easily integrate icons into their React applications without the need for additional CSS or external libraries.

We can apply react icons in our project in following ways:

Installation: We install the React Icons library using npm.

npm install react-icons        

Importing Icons: After installation, we import individual icons or entire icon packs into React components.

import { FaEnvelope, FaLock, FaUserAstronaut } from "react-icons/fa6"        

Usage: Once imported, you can use the icon components just like any other React component by including them in your JSX code.?

<div className="formInput">
        <Field name="firstName" type="text" placeholder="Enter first name" className=  {`form-control ${errors.firstName && touched.firstName ? "is-invalid":""}`} id="firstName" />
                        <ErrorMessage name="firstName" component={"div"} className="invalid-feedback"/>
 <FaUserAstronaut className="icon"/>                    
</div>        

React Forms

In React, forms work similarly to HTML forms but with some additional features provided by React to manage form state and behavior more effectively.

Managing Forms using ‘Formik’

Formik is a popular form management library for React that simplifies the process of building and validating forms. It provides a set of utilities and components to handle form state, validation, and submission in a more organized and efficient manner.

Form Validation using Yup

Yup is a schema builder for value parsing and validation. It's often used in combination with form libraries like Formik in React applications to define validation rules for form inputs. Yup allows us to create schemas that define the shape and constraints of the data and then validate data against those schemas.

Using the tools and framework, we managed and validated a simple login form as follows.

Working with Formik and Yup

Managing forms with Formik and validating using Yup is a powerful combination for building robust and flexible forms in React. Formik handles form state management and submission, while Yup handles form validation.

Installation: First, we need to install Formik and Yup.

npm install formik yup        

Setting up the Formik Form: We use the Formik component to wrap our form and provide form management capabilities.

Validation with Yup: Yup is a schema validation library. We define validation rules using Yup schema and pass it to the validationSchema prop of the Formik component. Yup provides various validation methods like string(), number(), object(), etc. In the example above, we use string() for all the fields and specify validation rules such as email() for the email field and required() for both fields.

Handling Submission: We specify an onSubmit function in the Formik component, which will be called when the form is submitted. Inside the onSubmit function, you can perform actions like sending form data to a server or reset the application. In the example above, we simply reset the form values.

const onSubmit=(values, {resetForm})=>{
        console.log(values)
        resetForm()
    }        

This is all that we learnt till the thirteenth day of learning react.

Very grateful to our mentor Bikash Karki