title: Mapping Elements in a Form (for Formik)
body: <p>In my form, I am using Formik/Yup for Validation. Currently, this works in my form perfectly:</p>
  
  <pre><code>export default function AddUserPage() {
    const [firstName, setFirstName] = useState("");
    const [email, setEmail] = useState("");
  
    return (
      &lt;div&gt;
        &lt;Formik
          initialValues={{ firstName: "", email: "" }}
          onSubmit={(values, actions) =&gt; {
            setTimeout(() =&gt; {
              alert(JSON.stringify(values, null, 2));
              actions.setSubmitting(false);
            }, 1000);
          }}
          validationSchema={schema}
        &gt;
          {props =&gt; {
            const {
              values: { firstName, lastName, email, password, phone },
              errors,
              touched,
              handleChange,
              isValid,
              setFieldTouched
            } = props;
            const change = (name: string, e: any) =&gt; {
              e.persist();
              handleChange(e);
              setFieldTouched(name, true, false);
            };
            return (
              &lt;div className="main-content"&gt;
                &lt;form style={{ width: "100%" }}&gt;
                  &lt;div&gt;
                    &lt;TextField
                      variant="outlined"
                      margin="normal"
                      id="firstName"
                      name="firstName"
                      helperText={touched.firstName ? errors.firstName : ""}
                      error={touched.firstName &amp;&amp; Boolean(errors.firstName)}
                      label="First Name"
                      //onChange={e =&gt; setFirstName(e.target.value)}
                      value={firstName}
                      onChange={change.bind(null, "firstName")}
                    /&gt;
                    &lt;br&gt;&lt;/br&gt;
                    &lt;TextField
                      variant="outlined"
                      margin="normal"
                      id="email"
                      name="email"
                      helperText={touched.email ? errors.email : ""}
                      error={touched.email &amp;&amp; Boolean(errors.email)}
                      label="Email"
                      value={email}
                      onChange={change.bind(null, "email")}
                    /&gt;
                    &lt;br&gt;&lt;/br&gt;
                  &lt;/div&gt;
                &lt;/form&gt;
              &lt;/div&gt;
            );
          }}
        &lt;/Formik&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>However, instead of typing everything, I want to map my text fields. How could I map my text fields? </p>
  
  <p>I tried something like this but I get errors for helperText and error properties: </p>
  
  <pre><code>{[{ label: "First Name", state: firstName , type: "text", function: setFirstName},
  { label: "Email", state: email , type: "text", function: setEmail},
    ]}.map((item, index) =&gt; (
    &lt;div&gt;
      &lt;TextField
        id="outlined-basic"
        key={index}
        label={item.label}
        variant="outlined"
        type= {item.type}
        helperText= {touched[item.state] ? errors[item.state] : ""}
        onChange={change.bind(null, state)}        
      /&gt;
      &lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;
    &lt;/div&gt;
  )
  </code></pre>
  
  <p>Here, I get an error on helper text that:</p>
  
  <blockquote>
    <p>Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'FormikTouched&lt;{ firstName: string; lastName: string; email: string; password: string; phone: string; }>'</p>
  </blockquote>
  
  <p>I tried adding this as well but this also gives me an error:</p>
  
  <p><code>helperText = {touched.item.state}</code></p>