How to load initial value in formik form

How to load initial value in formik form

ReactJS 17-03-2023 Saheb Sutradhar

How to load initial value in formik form ?

 

Loading initial value is a very important , Suppose you have a huge form and you want user to visit the form multiple time to update few more details , in that case you want to fetch the previous data form API and pre populate that data to the form .

To achieve that to have to follow 2 steps.

Step 1 :

Get the data form API and store it in the state using useState or you can use reducer or redux store , it is completely up to you

For example i have used useState and hardcoded the initial value

  

  const [iniValue , setiniValue] = useState(
    {
      name:'code learning point'
    }
  )

Step 2 :

In the Formik component add this

initialValues={iniValue || initialValues}  if you have iniValue which will come from the API else load the initialValues,
Make sure the structure of iniValue has to be same as initialValues.
 
And add enableReinitialize property which enables the reinitialisation feature to your formik form automatically.
    <Formik
      initialValues={iniValue || initialValues}
      validate={validation}
      onSubmit={onSubmit}
      enableReinitialize
    >

 

Complete Code : 

import { Form, Formik, Field, ErrorMessage, FieldArray } from 'formik';
import { useState } from 'react';




const Index = () => {

  const [iniValue , setiniValue] = useState(
    {
      name:'code learning point'
    }
  )

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


  let initialValues = {
    name: '',
  };

  const onSubmit = (values, props) => {
    console.log('--values--', values);
    props.isSubmitting(false)
  }
  return (
    <Formik
      initialValues={iniValue || initialValues}
      validate={validation}
      onSubmit={onSubmit}
      enableReinitialize
    >
      {
        (formik) => {
          return(
            <Form>
            <Field name="name" />
            <ErrorMessage name='name' />
            <button type='submit' disabled={!formik.isValid || formik.isSubmitting} >Submit</button>
          </Form>
          )


        }
      }
    </Formik>
  )

}


export default Index;



 

 

 

 

Related Posts

Card image cap

ReactJS Tutorial

ReactJS 07-09-2022 Saheb Sutradhar

ReactJS Tutorial Basic ...

Card image cap

React cteateContext and useContect context hook

ReactJS 21-12-2022 Saheb Sutradhar

React context hook ...

Card image cap

How to crate basic form in React using Formik

ReactJS 15-03-2023 Saheb Sutradhar

How to crate basic form in React using Formik , react formik example ...

Card image cap

Formik Components

ReactJS 17-03-2023 Saheb Sutradhar

Formik Components , how to create from using formik components ...

Card image cap

How to disabled the submit button in formik

ReactJS 17-03-2023 Saheb Sutradhar

How to disabled the submit button in formik ...