title: REACT - Set initial data in Formik Form after fetching from API
body: <p>I'm trying to do an edit page for a project I am working on, I can't seem to make the form get filled out with initial values coming from my API. I was hoping that after I fetched the data from my REST API, it would be set as the initialValues for my Form fields, however, it does not look like this is happening. Anything I could to to achieve my goal of pre-populating my form fields based on values I get from my API?</p>
  
  <p>Here's my code:</p>
  
  <pre><code>const EditBookInfoForm= (properties) =&gt; {
      const [data, setData] = useState();
  
      useEffect(() =&gt; {
          fetch(apiUrl + properties.bookId)
          .then(response =&gt; response.json())
          .then(result =&gt; {
              setData(result);
          });
      }, []);
  
  const validationSchema = Yup.object().shape({
          title: Yup.string()
              .max(50, 'You may only enter up to 50 characters')
              .required('Required'),
          description: Yup.string()
              .max(200, 'You may only enter up to 200 characters')
              .required('Required'),
          author: Yup.string()
              .required('Required')
      })
  
      return (
          &lt;div&gt;
              {
                  (data !== undefined) ?
                      &lt;Formik initialValues={data}
                          validationSchema={validationSchema}
                          onSubmit={(values) =&gt; {
                              setTimeout(() =&gt; {
                                  alert(JSON.stringify(values, null, 2));
                              }, 3000)
                          }}
                      &gt;
                          {props =&gt; (
                              &lt;Form&gt;
                                  &lt;Grid container spacing={2}&gt;
                                      &lt;Grid item xs={6}&gt;
                                          &lt;TextField name="bookId" label="Book ID" variant="outlined" 
                                               margin="dense" color="secondary" type="input"/&gt;
                                          &lt;TextField name="title" label="Title" variant="outlined" 
                                               margin="dense" color="secondary" type="input"/&gt;
                                          &lt;TextField name="description" label="Description" type="input"
                                               variant="outlined" margin="dense" color="secondary" /&gt;
                                          &lt;TextField name="author" label="Author" variant="outlined" 
                                               margin="dense" color="secondary" type="input"/&gt;
                                      &lt;/Grid&gt;
                                  &lt;/Grid&gt;
                                  &lt;DialogActions &gt;
                                      &lt;DangerButton icon={&lt;SaveRecordIcon /&gt;} label="Save"
                                          handleClick={() =&gt; alert("Save")} /&gt;
                                      &lt;PrimaryButton icon={&lt;PlusIcon /&gt;} label="Submit"
                                          handleClick={() =&gt; props.handleSubmit()} /&gt;
                                      &lt;NeutralButton label="Next" handleClick={() =&gt; alert("next")} /&gt;
                                  &lt;/DialogActions&gt;
                              &lt;/Form&gt;
                          )}
                      &lt;/Formik&gt;
                      : &lt;OverlaySpinner /&gt;
              }
          &lt;/div &gt;
      )
  }
  
  export default EditBookInfoForm
  </code></pre>
  
  <p>Below is what the results from my API are:</p>
  
  <pre><code>[{
      bookId: 1
      title: "Anna Karenina"
      description: "Anna Karenina tells of the doomed love affair between the sensuous and rebellious Anna and the dashing officer, Count Vronsky."
      author: "Leo Tolstoy"
  }]
  </code></pre>