Formik: The equivalent of componentDidMount

[Manocry]

❓Question

How to init the initial value with api call instead of the following :

initialValues={{
firstName: "",
lastName: "",
email: "",
favoriteColor: ""
}}

[prichodko]

Initiate API call outside of Formik and pass it as prop to initialValues. You may need to set https://jaredpalmer.com/formik/docs/api/withFormik#enablereinitialize-boolean to true, depends on your use case.

I also recommend to learn how to format your code in Markdown - here

[brodybits]

I wonder if this can be documented more clearly?

On Sun, Nov 11, 2018, 10:57 PM Pavel Prichodko [e-mail]
wrote:

Closed #1099 https://github.com/jaredpalmer/formik/issues/1099.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/jaredpalmer/formik/issues/1099#event-1959299876, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABfNUAhMSObV8jpiLBMzF7UOkV4M3i8Kks5uuPGdgaJpZM4YYmEh
.

[Manocry]

Thank you @prichodko but your recommendation doesn't works for me. For example :

  async componentDidMount() {
   //This the api call  
   const apidata =  await axios.get('/api/data')
    this.state.initialValues.apidata = apidata.data;
  }

And the call in the Formik is the following

  const App = (props) => (
    <div>
      {console.log("props.categorylist in wizard " + JSON.stringify(props.initialValues))}
      <Wizard
          initialValues= {props.initialValues}
          ........

[jaredpalmer]

Use a component? Why is this reopened?

[prichodko]

New issue pointing to this one opened here - https://github.com/jaredpalmer/formik/issues/1105, so I closed in favor of original (this) one.

[prichodko]

@Manocry in your code snippet, you are directly mutating state (which does not cause rerender) instead of calling setState, which could mean that you are not very familiar with React yet. I recommend reading awesome official docs.

[crsandeep]

@Manocry you can check this sample app https://codesandbox.io/s/82oy251yqj

[Manocry]

In the following example https://codesandbox.io/s/o7kn2q45lq, I just want to pass the api call result as a props to the Wizard
Example of API call :

  componentDidMount() {
    Axios.get('https://jsonplaceholder.typicode.com/todos/1').then(res => {
      this.setState({ data: res.data, displayForm: true });
    });
  }

Instead of the following block in MyForm.js

    <Wizard
      initialValues={{
        firstName: "",
        lastName: "",
        email: "",
        favoriteColor: "",
        choice: ""
      }}
...

Expected

    <Wizard
      initialValues={props.data}
...

I do not know where to position the componentDidMount function. Thanks for your help.

[jaredpalmer]

@Manocry

class App extends React.Component {
   state = {}
   componentDidMount() {
    Axios.get('https://jsonplaceholder.typicode.com/todos/1').then(res => {
      this.setState({ data: res.data });
    });
  }

  render() {
   if (!this.state.data) {
     return 'loading...'
    }
   return <Wizard
      initialValues={thist.state.data}
      ...
    />
  }
}

[Manocry]

@jaredpalmer Thank you for the solution. It's work