title: How can I dynamically tie my form into Formik, in React functional component
body: <p>I'm building a React component which loads form data dynamically from an external API call. I'll need to submit it back to another API endpoint after the user completes it.</p>
  <p>here it is:</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  import TextField from &quot;@material-ui/core/TextField&quot;;
  import { useFormik } from &quot;formik&quot;;
  
  const FORM = () =&gt; {
  
    const [form, setForm] = useState([]);
    const [submission, setSubmission] = useState({});
  
    const formik = useFormik({
      initialValues: {
        email: &quot;&quot;,
      },
    });
  
    useEffect(() =&gt; {
      (async () =&gt; {
        const formData = await axios.get(&quot;https://apicall.com/fakeendpoint&quot;);
        setForm(formData.data);
      })();  
    }, []);
  
    return (
      &lt;form&gt;
          {form.map((value, index) =&gt; {
            if (value.fieldType === &quot;text&quot;) {
              return (
                &lt;TextField 
                  key={index} 
                  id={value.name}
                  label={value.label}
                /&gt;
              );
            } 
            if (value.fieldType === &quot;select&quot;) {
              return (
                &lt;TextField 
                  select={true}
                  key={index} 
                  id={value.name}
                  label={value.label}
                &gt;
                  {value.options.map((option) =&gt; (
                    &lt;option key={option.value} value={option.value}&gt;
                      {option.label}
                    &lt;/option&gt;
                  ))}
                &lt;/TextField&gt;
              );
            }
          })}
          &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
    );
  };
   
  export default FORM;
  </code></pre>
  <p>The API call is coming in ok (yeah i now i need some error handle on that) and I am able to populate the fields and get the form on the page. Where I am having trouble (and im newer to Formik so bear with me) is i need to do validation and submission. I do not really know how to handle the values, usually i'd write some type of static code for the variables, test them and then submit.</p>
  <p><em>usually</em> i'd set a field for &quot;name&quot; and one for &quot;email&quot; for example. In this case i can't write those fields in because they come from the API and we have no idea what they are until we get the call response.</p>
  <p>My code handles the field creation but i need to wire for validation and submission and want to use Formik.</p>
  <p>How can i accomplish a dynamic form (thru formik) which is wired for validation and submission?</p>