React Formik

Formik is a library helps to handle form in React , Formik helps to handle Form submission , From Validation , Manages Form data.

Installation

npm install formik

Formik library provides a hook called useFormik() which helps to manage our form by providing three features 

1. Manage form data

2. Form Validation

3. Form Submission 

Full Code : 

import { useFormik } from 'formik';


const formikForm = ()=>{

  const validation = (values) => {
    let error = {};
    if (!values.name) {
      error.name = 'Name is required';
    }
    if (!values.phone) {
      error.phone = 'Phone is required';
    }
    if (!values.address) {
      error.address = 'Address is required';
    }

    return error;
  }


const formik = useFormik({
  initialValues: {
    name: '',
    phone: '',
    address: ''
  },
  validate: validation,
  onSubmit: (values) => {
    console.log(values)
    console.log(formik)
  }
})







  return (
    <form onSubmit={formik.handleSubmit}>
    <div>
      <input type="text" placeholder='Name' name='name' onChange={formik.handleChange} value={formik.values.name} onBlur={formik.handleBlur} />
      {
        formik.touched.name && formik.errors.name ?
          <p style={{ color: 'red' }}>{formik.errors.name}-Name</p>
          :
          null
      }

    </div>

    <div>
      <input type="text" placeholder='Phone' name='phone' onChange={formik.handleChange} value={formik.values.phone} onBlur={formik.handleBlur} />
      {
        formik.touched.phone && formik.errors.phone ?
          <p style={{ color: 'red' }}>{formik.errors.phone} - Phone</p>
          :
          null
      }

    </div>
    <div>
      <input type="text" placeholder='Address' name='address' onChange={formik.handleChange} value={formik.values.address} onBlur={formik.handleBlur} />
      {
        formik.touched.address && formik.errors.address ?
          <p style={{ color: 'red' }}>{formik.errors.address}-Address</p>
          :
          null
      }

    </div>
    <button type='submit'>Submit</button>
  </form>
  )
}

export default formikForm;

In the above code 

Step 1

Import the useFormik() hook

import { useFormik } from 'formik';

Step 2

Configure the form state , submit and validation

  const validation = (values) => {
    let error = {};
    if (!values.name) {
      error.name = 'Name is required';
    }
    if (!values.phone) {
      error.phone = 'Phone is required';
    }
    if (!values.address) {
      error.address = 'Address is required';
    }

    return error;
  }


const formik = useFormik({
  initialValues: {
    name: '',
    phone: '',
    address: ''
  },
  validate: validation,
  onSubmit: (values) => {
    console.log(values)
    console.log(formik)
  }
})

Step 3

Create the form

 <form onSubmit={formik.handleSubmit}>
      <div>
        <input type="text" name='name' onChange={formik.handleChange} value={formik.values.name} onBlur={formik.handleBlur} />
        {
          formik.touched.name && formik.errors.name ?
            <p style={{ color: 'red' }}>{formik.errors.name}</p>
            :
            null
        }

      </div>

      <div>
        <input type="text" name='phone' onChange={formik.handleChange} value={formik.values.phone} onBlur={formik.handleBlur} />
        {
          formik.touched.phone && formik.errors.phone ?
            <p style={{ color: 'red' }}>{formik.errors.phone}</p>
            :
            null
        }

      </div>
      <div>
        <input type="text" name='address' onChange={formik.handleChange} value={formik.values.address} onBlur={formik.handleBlur} />
        {
          formik.touched.address && formik.errors.address ?
            <p style={{ color: 'red' }}>{formik.errors.address}</p>
            :
            null
        }

      </div>
      <button type='submit'>Submit</button>
    </form>

NOTE :  In the field name attribute value and the  initialValues property name should be same . 

        {
          formik.touched.name && formik.errors.name ?
            <p style={{ color: 'red' }}>{formik.errors.name}</p>
            :
            null
        }

<input type="text" placeholder='Name' name='name' onChange={formik.handleChange} value={formik.values.name} onBlur={formik.handleBlur} />

<input type="text" placeholder='Name' name='name'  {...formik.getFiledProps('name')} />