title: ReactJS Javascript - Dynamic Add / Remove Rows of Input in Form
body: <p>I am currently working on a web app that requires a dynamic form to be generated, where I can press an 'add' or 'remove' button to add or remove instances of a model in the form. For example, the structure of the form is like this:</p>
  
  <p>Company Name: ...
  Address: ...
  Telephone Number: ...</p>
  
  <p>(below is the part where i need to dynamically add and remove instances since there can be multiple POCs from 1 company)</p>
  
  <p>POC1 Name:  ...
  POC1 Email: ...
  POC1 Phone Number: ...</p>
  
  <p>POC2 Name:  ...
  POC2 Email: ...
  POC2 Phone Number: ...</p>
  
  <p>etc.</p>
  
  <p>I came across this example of how to do it (<a href="https://codesandbox.io/s/wonderful-lichterman-br63z?file=/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/wonderful-lichterman-br63z?file=/index.js</a>) , but I can't seem to understand some parts of the code. I am new to Javascript and I am using ReactJS as the front end of my app. Below is the snippet of the code</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import "antd/dist/antd.css";
  import "./index.css";
  import { Form, Input, Button, Col, Row } from "antd";
  import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
  
  const rules = [{ required: true }];
  
  const DynamicFieldSet = () =&gt; {
    const onFinish = values =&gt; {
      console.log("Received values of form:", values);
    };
  
     return (
       &lt;Form onFinish={onFinish} className="my-form"&gt;
        &lt;Form.List name="users"&gt;
          {(fields, { add, remove }) =&gt; {
            /**
             * `fields` internal fill with `name`, `key`, `fieldKey` props.
             * You can extends this into sub field to support multiple dynamic fields.
             */
            return (
              &lt;div&gt;
                {fields.map((field, index) =&gt; (
                  &lt;Row key={field.key}&gt;
                    &lt;Col&gt;
                      &lt;Form.Item
                        name={[field.name, "lastName"]}
                        fieldKey={[field.fieldKey, "lastName"]}
                        rules={rules}
                      &gt;
                        &lt;Input placeholder="last name" /&gt;
                      &lt;/Form.Item&gt;
                    &lt;/Col&gt;
                    &lt;Col&gt;
                      &lt;Form.Item
                        name={[field.name, "firstName"]}
                        fieldKey={[field.fieldKey, "firstName"]}
                        rules={rules}
                      &gt;
                        &lt;Input placeholder="first name" /&gt;
                      &lt;/Form.Item&gt;
                    &lt;/Col&gt;
                    &lt;Col flex="none"&gt;
                      &lt;MinusCircleOutlined
                        className="dynamic-delete-button"
                        onClick={() =&gt; {
                          remove(field.name);
                        }}
                      /&gt;
                    &lt;/Col&gt;
                  &lt;/Row&gt;
                 ))}
                &lt;Form.Item&gt;
                   &lt;Button
                    type="dashed"
                    onClick={() =&gt; {
                      add();
                    }}
                    style={{ width: "100%" }}
                  &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="primary" htmlType="submit"&gt;
            Submit
          &lt;/Button&gt;
        &lt;/Form.Item&gt;
      &lt;/Form&gt;
        );
      };
  
  ReactDOM.render(&lt;DynamicFieldSet /&gt;, document.getElementById("container"));
  </code></pre>
  
  <p>I do not really understand where the 'fields' variable came from, and also where the 'index' variable came from. Also, how is the arrow function being executed without any explicit call for that function? Any help is appreciated and in the mean time I will continue looking through and trying to understand arrow functions as much as possible as I am still new to it, thanks in advance.</p>