reactjs - How can I dynamically tie my form into Formik, in React functional component

Question

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.

here it is:

import React, { useEffect, useState } from "react";
import axios from "axios";
import TextField from "@material-ui/core/TextField";
import { useFormik } from "formik";

const FORM = () => {

  const [form, setForm] = useState([]);
  const [submission, setSubmission] = useState({});

  const formik = useFormik({
    initialValues: {
      email: "",
    },
  });

  useEffect(() => {
    (async () => {
      const formData = await axios.get("https://apicall.com/fakeendpoint");
      setForm(formData.data);
    })();  
  }, []);

  return (
    <form>
        {form.map((value, index) => {
          if (value.fieldType === "text") {
            return (
              <TextField 
                key={index} 
                id={value.name}
                label={value.label}
              />
            );
          } 
          if (value.fieldType === "select") {
            return (
              <TextField 
                select={true}
                key={index} 
                id={value.name}
                label={value.label}
              >
                {value.options.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </TextField>
            );
          }
        })}
        <button type="submit">Submit</button>
      </form>
  );
};
 
export default FORM;

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.

usually i'd set a field for "name" and one for "email" 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.

My code handles the field creation but i need to wire for validation and submission and want to use Formik.

How can i accomplish a dynamic form (thru formik) which is wired for validation and submission?

question from:https://stackoverflow.com/questions/65921936/how-can-i-dynamically-tie-my-form-into-formik-in-react-functional-component

Answer 1

Waitting for answers