title: Modify an array of elements
body: <p>I have an application where users can add their data in a form with 2 fields. They can add as many fields as they want.</p>
  <pre><code>const Demo = () =&gt; {
    const onFinish = values =&gt; {
      console.log(&quot;Received values of form:&quot;, values);
    };
    const firstDefaultOpen = {
      name: 0,
      key: 0,
      isListField: true,
      fieldKey: 0
    };
    const testHandler = a =&gt; {
      console.log(&quot;result&quot;, a.concat(firstDefaultOpen));
      return a.concat(firstDefaultOpen);
    };
    return (
      &lt;Form name=&quot;dynamic_form_nest_item&quot; onFinish={onFinish} autoComplete=&quot;off&quot;&gt;
        &lt;Form.List name=&quot;users&quot;&gt;
          {(fields, { add, remove }) =&gt; {
            return (
              &lt;div&gt;
                {testHandler(fields).map(field =&gt; (
                  &lt;Space
                    key={field.key}
                    style={{ display: &quot;flex&quot;, marginBottom: 8 }}
                    align=&quot;start&quot;
                  &gt;
                    &lt;Form.Item
                      {...field}
                      name={[field.name, &quot;first&quot;]}
                      fieldKey={[field.fieldKey, &quot;first&quot;]}
                      rules={[{ required: true, message: &quot;Missing first name&quot; }]}
                    &gt;
                      &lt;Input placeholder=&quot;First Name&quot; /&gt;
                    &lt;/Form.Item&gt;
                    &lt;Form.Item
                      {...field}
                      name={[field.name, &quot;last&quot;]}
                      fieldKey={[field.fieldKey, &quot;last&quot;]}
                      rules={[{ required: true, message: &quot;Missing last name&quot; }]}
                    &gt;
                      &lt;Input placeholder=&quot;Last Name&quot; /&gt;
                    &lt;/Form.Item&gt;
  
                    &lt;MinusCircleOutlined
                      onClick={() =&gt; {
                        remove(field.name);
                      }}
                    /&gt;
                  &lt;/Space&gt;
                ))}
  
                &lt;Form.Item&gt;
                  &lt;Button
                    type=&quot;dashed&quot;
                    onClick={() =&gt; {
                      add();
                    }}
                    block
                  &gt;
                    &lt;PlusOutlined /&gt; Add field
                  &lt;/Button&gt;
                &lt;/Form.Item&gt;
              &lt;/div&gt;
            );
          }}
        &lt;/Form.List&gt;
  
        &lt;Form.Item&gt;
          &lt;Button type=&quot;primary&quot; htmlType=&quot;submit&quot;&gt;
            Submit
          &lt;/Button&gt;
        &lt;/Form.Item&gt;
      &lt;/Form&gt;
    );
  };
  </code></pre>
  <p>My target is to set a default pair of inputs as opened. Now you can see when you open the application that <code>first name</code> and <code>last name</code> inputs are open as default. This i made with:</p>
  <pre><code> const firstDefaultOpen = {
      name: 0,
      key: 0,
      isListField: true,
      fieldKey: 0
    };
    const testHandler = a =&gt; {
      console.log(&quot;result&quot;, a.concat(firstDefaultOpen));
      return a.concat(firstDefaultOpen);
    };
  </code></pre>
  <p>and here i map() the new array:</p>
  <pre><code> {testHandler(fields).map(field =&gt; (...
  </code></pre>
  <p>The issue is when i click on <code>Add field</code> button, because there when i try to write something in one input also the same text appears on the another. This is happening because when i click on <code>Add field</code> button you can see in the <code>console.log(&quot;result&quot;, a.concat(firstDefaultOpen));</code>, that 2 objects are with the same  values like:</p>
  <pre><code>[Object, Object]
  0: Object
  name: 0
  key: 0
  isListField: true
  fieldKey: 0
  1: Object
  name: 0
  key: 0
  isListField: true
  fieldKey: 0
  </code></pre>
  <p>Question: How to set the first object with all values 0, and the next values to be higher, and to get something like?:</p>
  <pre><code>[Object, Object]
  0: Object
  name: 0
  key: 0
  isListField: true
  fieldKey: 0
  1: Object
  name: 1
  key: 1
  isListField: true
  fieldKey: 1
  2: Object
  name: 2
  key: 2
  isListField: true
  fieldKey: 2
  ...
  </code></pre>
  <p>demo: <a href="https://codesandbox.io/s/hungry-star-nu5ld?file=/index.js:783-819" rel="nofollow noreferrer">https://codesandbox.io/s/hungry-star-nu5ld?file=/index.js:783-819</a></p>