title: Formik FiedlArray - checkbox, label/textfield combo
body: <p>I am trying to integrate a formik FieldArray on a website -- where they want to have checkboxes and labels and if its a new entry to have it as a textfield.</p>
  <p><a href="https://formik.org/docs/examples/field-arrays" rel="nofollow noreferrer">https://formik.org/docs/examples/field-arrays</a></p>
  <p>I'm following this example but I am unsure how you detect if its a newly added field - and how to toggle between a textfield or a label near the checkbox for something like this?</p>
  <p><a href="https://i.stack.imgur.com/pB1uN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pB1uN.png" alt="enter image description here" /></a></p>
  <p><a href="https://codesandbox.io/s/angry-bouman-ycesi5" rel="nofollow noreferrer">https://codesandbox.io/s/angry-bouman-ycesi5</a></p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import { Formik, Field, Form, ErrorMessage, FieldArray } from &quot;formik&quot;;
  
  const initialValues = {
    friends: [
      {
        name: &quot;billybob&quot;,
        checkbox_name: true
      }
    ]
  };
  
  const AddGoals = () =&gt; (
    &lt;div&gt;
      &lt;h1&gt;Invite friends&lt;/h1&gt;
      &lt;Formik
        initialValues={initialValues}
        onSubmit={async (values) =&gt; {
          await new Promise((r) =&gt; setTimeout(r, 500));
          alert(JSON.stringify(values, null, 2));
        }}
      &gt;
        {({ values }) =&gt; (
          &lt;Form&gt;
            &lt;FieldArray name=&quot;friends&quot;&gt;
              {({ insert, remove, push }) =&gt; (
                &lt;div&gt;
                  {values.friends.length &gt; 0 &amp;&amp;
                    values.friends.map((friend, index) =&gt; (
                      &lt;div className=&quot;row&quot; key={index}&gt;
                        &lt;div className=&quot;col&quot;&gt;
                          &lt;label&gt;
                            &lt;Field
                              type=&quot;checkbox&quot;
                              name={`friends.${index}.checkbox_name`}
                            /&gt;
                            xxxx
                          &lt;/label&gt;
  
                          &lt;label htmlFor={`friends.${index}.name`}&gt;Name&lt;/label&gt;
                          &lt;Field
                            name={`friends.${index}.name`}
                            placeholder=&quot;Jane Doe&quot;
                            type=&quot;text&quot;
                          /&gt;
                          &lt;ErrorMessage
                            name={`friends.${index}.name`}
                            component=&quot;div&quot;
                            className=&quot;field-error&quot;
                          /&gt;
                        &lt;/div&gt;
                        &lt;div className=&quot;col&quot;&gt;
                          &lt;button
                            type=&quot;button&quot;
                            className=&quot;secondary&quot;
                            onClick={() =&gt; remove(index)}
                          &gt;
                            X
                          &lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    ))}
                  &lt;button
                    type=&quot;button&quot;
                    className=&quot;secondary&quot;
                    onClick={() =&gt; push({ name: &quot;&quot;, checkbox_name: false })}
                  &gt;
                    Add Goal
                  &lt;/button&gt;
                &lt;/div&gt;
              )}
            &lt;/FieldArray&gt;
            &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
          &lt;/Form&gt;
        )}
      &lt;/Formik&gt;
    &lt;/div&gt;
  );
  
  ReactDOM.render(&lt;AddGoals /&gt;, document.getElementById(&quot;root&quot;));
  </code></pre>
  <p>so would we make a condition using a flag new</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import { Formik, Field, Form, ErrorMessage, FieldArray } from &quot;formik&quot;;
  
  const initialValues = {
    friends: [
      {
        name: &quot;billybob&quot;,
        checkbox_name: true,
        new: false
      }
    ]
  };
  
  const AddGoals = () =&gt; (
    &lt;div&gt;
      &lt;h1&gt;Invite friends&lt;/h1&gt;
      &lt;Formik
        initialValues={initialValues}
        onSubmit={async (values) =&gt; {
          await new Promise((r) =&gt; setTimeout(r, 500));
          alert(JSON.stringify(values, null, 2));
        }}
      &gt;
        {({ values }) =&gt; (
          &lt;Form&gt;
            &lt;FieldArray name=&quot;friends&quot;&gt;
              {({ insert, remove, push }) =&gt; (
                &lt;div&gt;
                  {values.friends.length &gt; 0 &amp;&amp;
                    values.friends.map((friend, index) =&gt; (
                      &lt;div className=&quot;row&quot; key={index}&gt;
                        &lt;div className=&quot;col&quot;&gt;
                          &lt;label&gt;
                            &lt;Field
                              type=&quot;checkbox&quot;
                              name={`friends.${index}.checkbox_name`}
                            /&gt;
                            {!friend.new ? (
                              &lt;span&gt;{friend.name}&lt;/span&gt;
                            ) : (
                              &lt;Field
                                name={`friends.${index}.name`}
                                placeholder=&quot;Jane Doe&quot;
                                type=&quot;text&quot;
                              /&gt;
                            )}
                          &lt;/label&gt;
                          &lt;ErrorMessage
                            name={`friends.${index}.name`}
                            component=&quot;div&quot;
                            className=&quot;field-error&quot;
                          /&gt;
                        &lt;/div&gt;
                        &lt;div className=&quot;col&quot;&gt;
                          &lt;button
                            type=&quot;button&quot;
                            className=&quot;secondary&quot;
                            onClick={() =&gt; remove(index)}
                          &gt;
                            X
                          &lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    ))}
                  &lt;button
                    type=&quot;button&quot;
                    className=&quot;secondary&quot;
                    onClick={() =&gt;
                      push({ name: &quot;&quot;, checkbox_name: false, new: true })
                    }
                  &gt;
                    Add Goal
                  &lt;/button&gt;
                &lt;/div&gt;
              )}
            &lt;/FieldArray&gt;
            &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
          &lt;/Form&gt;
        )}
      &lt;/Formik&gt;
    &lt;/div&gt;
  );
  
  ReactDOM.render(&lt;AddGoals /&gt;, document.getElementById(&quot;root&quot;));
  </code></pre>