Form Handling | React | Part 3 | Components

#react #javascript #webdev #tutorial

Hello everyone, before moving on to the blog, i want to clarify that i will be wrapping up this series and this one is the final part, i won't go in deep for "formik" as it is basically depreciated pretty much and not maintained now, even the last release was 1 year ago.
Instead, i would start a new series on "React hooks form", which is a lightweight form handling library and also the latest one, and similar to formik.

Let's get started...

So, in this part of the series, we are going to reduce boilerplate and use formik components to achieve the same goal which we did in our last blog in the series.

import React from 'react'
import { Formik, Form, Field, ErrorMessage } from 'formik'
import * as Yup from 'yup'
import TextError from './TextError'

const initialValues = {
    name: 'Shubham',
    email: '',
    company: '',
}

const onSubmit = (values) => {
    console.log('Form data', values)
}

const validationSchema = Yup.object({
    name: Yup.string().required("Name is required"),
    email: Yup.string().email("Email format invalid").required("Email is required"),
    company: Yup.string().required("Company is required"),
})

function DemoForm() {

    return (
        <div className='grid-container'>
            <Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema} validateOnMount>
                <Form className='form-container'>
                    <div className='form-control'>
                        <label htmlFor='name'>Name</label>
                        <div className='relative'>
                            <Field type='text' id='name' name='name' className='form-input' />
                            <ErrorMessage name='name' component={TextError} />
                        </div>
                    </div>

                    <div className='form-control'>
                        <label htmlFor='email'>E-mail</label>
                        <div className='relative'>
                            <Field type='email' id='email' name='email' className='form-input' />
                            <ErrorMessage name='email' component={TextError} />
                        </div>
                    </div>

                    <div className='form-control'>
                        <label htmlFor='company'>Company</label>
                        <div className='relative'>
                            <Field type='text' id='company' name='company' className='form-input' />
                            <ErrorMessage name='company' component={TextError} />
                        </div>
                    </div>
                    <button type='submit' className='form-submit'>Submit</button>
                </Form>
            </Formik>
        </div>
    )
}

export default DemoForm

So we have imported 4 component -

Formik is the container component, we can remove the "useFormik" hook and use Formik component to achieve the same result. We need to pass initial values, onSubmit handler and validationSchema as props
Form component to handle the form entirely, we can remove onSubmit handler, Form component will handle things behind the scenes.
Field component is used instead of input fields, We can remove the values, onChange and onBlur attributes as the component will handle those behind the scenes using the name attribute we pass.
ErrorMessage component is used instead of creating the logic for errors using touched and error and then displaying it, this component needs name attribute to track the errors and component attribute to pass in the custom UI we created to show the error.
Rest of the things are same.