How to Set Initial Values to Formik using Axios with Typescript

Question

I am new to using React, Formik, and Axios and not sure how to set the form's initial values from a database call. I have tried below code snippet, but have not been successful. I am unable to find any typescript examples online on how to do this.

async function getInitialValues() {
      try {
            const response = await axios.get('http://localhost:53132/api/test');
            //console.log(response);


            return {
                Division_Id: response.Divison_Id,
                Year: response.Year,
                Cost: response.Cost
            }

            //console.log(InitialValues);

            //return InitialValues;


          } catch (error) {
            console.error(error);
          }
    }


<Formik initialValues={getInitialValues()}...

Are you getting any error? can you add more details please?

Muhammad Haseeb
– Muhammad Haseeb

2020-01-30 13:58:58 +00:00
Commented Jan 30, 2020 at 13:58 — Muhammad Haseeb
– Muhammad Haseeb, Commented Jan 30, 2020 at 13:58

Gerard · Accepted Answer · 2020-01-30 20:46:20Z

4

You'll want to make your network request on mount (using the "useEffect" hook in this example). Then save those values to state (using the useState hook here, but you can use Redux or whatever state management tool you're using).

function NewForm() {
  const [initialValues, setInitialValues] = useState();

  useEffect(() => {
    getInitialValues().then(res => setInitialValues(res);
  }, []);

  return initialValues ? 
    <Formik initialValues={initialValues}>content</Formik> :
    <span>loading...</span>;
}

edited Jan 30, 2020 at 20:46

answered Jan 30, 2020 at 14:08

Gerard

8016 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Terry Doll Over a year ago

I tried updating my code, but Stackoverflow is not allowing me to post the entire file. I have revised the code and it is available at below link. The app goes haywire and just keeps making calls to the service... github.com/tadstudios/CodeSandbox/blob/master/test

Muhammad Haseeb · Accepted Answer · 2020-01-30 19:22:50Z

0

Thats because you are missing the dependency in the useEffect. add an empty array as a dependency(second argument of useEffect) if you want to run only once, when page renders

   function NewForm() {
      const [initialValues, setInitialValues] = useState();

      useEffect(() => {
        getInitialValues().then(res => setInitialValues(res);
      }, []);

      return initialValues ? 
        <Formik initialValues={initialValues}>content</Formik> :
        <span>loading...</span>;
    }

answered Jan 30, 2020 at 19:22

Muhammad Haseeb

1,3611 gold badge12 silver badges24 bronze badges

1 Comment

Terry Doll Over a year ago

Thanks for the help everyone! It finally clicked and have it working!

Collectives™ on Stack Overflow

How to Set Initial Values to Formik using Axios with Typescript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related