title: Nested Dynamic Forms Antd
body: <p>So i put together this Dynamic Form Below (Hotel Rooms) and inside it you can also create dynamic forms (Room Beds). It works, i can add rooms &amp; Beds and the object array is returned in the console.log (onSubmit).</p>
  <p>codesandbox: <a href="https://codesandbox.io/s/charming-hermann-nzpbu?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/charming-hermann-nzpbu?file=/src/App.js</a></p>
  <p><strong>Issue:</strong>
  If you add room1 and room2 and then delete room1, the array stays of length 2 and now it has &quot;beds undefined&quot; and it keeps growing when you add beds to other rooms! Help me solve this:</p>
  <p>Object returned when you press next (in console). As you can see the array is not subtracting but it is also leaving the beds undefined when i delete a room:</p>
  <pre><code>listingDescription: &quot;ss&quot;
  listingName: &quot;aa&quot;
  pricePerMonth: 1
  rooms: Array(2)
  0: {roomname: &quot;room2&quot;, beds: Array(1)}
  1: {beds: undefined}
  </code></pre>
  <p>The Main Form:</p>
  <pre><code>import React from 'react';
  import { useStateMachine } from 'little-state-machine';
  import { useForm } from 'react-hook-form';
  import { Row, Col, Input, InputNumber, Button, Form, Space } from 'antd';
  import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
  import FormControl from 'components/UI/FormControl/FormControl';
  import AddListingAction from './AddListingAction';
  import { FormHeader, Title, FormContent, FormAction } from './AddListing.style';
  import BedForm from &quot;./BedForm&quot;;
  
  const BasicInformation = ({ setStep }) =&gt; {
    const { action, state } = useStateMachine(AddListingAction);
    const { control, register, errors, setValue, handleSubmit } = useForm();
  
  
    const onSubmit = (data) =&gt; {
      console.log(data);
    };
  
    return (
      &lt;Form onFinish={(e) =&gt; onSubmit(e)}&gt;
        &lt;FormContent&gt;
          &lt;FormHeader&gt;
            &lt;Title&gt;Step 1: Start with the basics&lt;/Title&gt;
          &lt;/FormHeader&gt;
          &lt;Row gutter={30}&gt;
            &lt;Col sm={12}&gt;
              &lt;FormControl
                label='Listing Name'
                htmlFor='listingName'
                error={errors.listingName &amp;&amp; &lt;span&gt;This field is required!&lt;/span&gt;}
              &gt;
                &lt;Form.Item
                  id='listingName'
                  name='listingName'
                  defaultValue={state.data.listingName}
                  control={control}
                  placeholder='Write a name for your listing here'
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                &gt;
                  &lt;Input /&gt;
                &lt;/Form.Item&gt;
              &lt;/FormControl&gt;
            &lt;/Col&gt;
            &lt;Col sm={12}&gt;
              &lt;FormControl
                label='Price Per Night (USD)'
                htmlFor='pricePerMonth'
              &gt;
                &lt;Form.Item
                  name='pricePerMonth'
                  id='pricePerMonth'
                  defaultValue={state.data.pricePerMonth}
                  control={control}
                  placeholder='00.00'
                  rules={[
                    {
                      required: true,
                      pattern: /^[0-9]*$/,
                    },
                  ]}
                &gt;
                  &lt;InputNumber min={0} /&gt;
                &lt;/Form.Item&gt;
              &lt;/FormControl&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
          &lt;FormControl
            label='Listing Description'
            htmlFor='listingDescription'
            error={
              errors.listingDescription &amp;&amp; &lt;span&gt;This field is required!&lt;/span&gt;
            }
          &gt;
            &lt;Form.Item
              id='listingDescription'
              name='listingDescription'
              defaultValue={state.data.listingDescription}
              control={control}
              placeholder='Tell people about your listing, rooms, location &amp; amenities'
              rules={[
                {
                  required: true,
                },
              ]}
            &gt;
              &lt;Input.TextArea rows={5} /&gt;
            &lt;/Form.Item&gt;
          &lt;/FormControl&gt;
          &lt;FormControl
            label='How many rooms does your listing have?'
            error={errors.guest &amp;&amp; &lt;span&gt;This field is required!&lt;/span&gt;}
          &gt;
            {/* This is the Dynamic room Adder */}
            &lt;Form.List name='rooms'&gt;
              {(fields, { add, remove }) =&gt; {
                return (
                  &lt;div&gt;
                    {fields.map((field) =&gt; (
                      &lt;Space
                        key={field.key}
                        style={{ display: 'flex', marginBottom: 8 }}
                        align='start'
                      &gt;
                        &lt;Form.Item
                          {...field}
                          name={[field.name, 'roomname']}
                          fieldKey={[field.fieldKey, 'roomname']}
                          rules={[
                            { required: true, message: 'Missing room name' },
                          ]}
                        &gt;
                          &lt;Input placeholder='Room Name' /&gt;
                        &lt;/Form.Item&gt;
  
                        {/* This is the Dynamic bed Adder */}
  
                        &lt;Form.Item&gt;
                        &lt;BedForm fieldKey={field.key} /&gt;
                        &lt;/Form.Item&gt;
  
                        &lt;MinusCircleOutlined
                          onClick={() =&gt; {
                            remove(field.name);
                            console.log(field)
                          }}
                        /&gt;
                      &lt;/Space&gt;
                    ))}
  
                    &lt;Button
                      type='dashed'
                      onClick={() =&gt; {
                        add();
                      }}
                      block
                    &gt;
                      &lt;PlusOutlined /&gt; Add room
                    &lt;/Button&gt;
                  &lt;/div&gt;
                );
              }}
            &lt;/Form.List&gt;
          &lt;/FormControl&gt;
        &lt;/FormContent&gt;
  
        &lt;FormAction&gt;
          &lt;div className='inner-wrapper'&gt;
            &lt;Button type='primary' htmlType='submit'&gt;
              Next
            &lt;/Button&gt;
          &lt;/div&gt;
        &lt;/FormAction&gt;
      &lt;/Form&gt;
    );
  };
  
  export default BasicInformation;
  </code></pre>
  <p>The Child Form (BedForm)</p>
  <pre><code>import React from 'react';
  
  import { Form, Input, Button, Space, Select } from 'antd';
  import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
  const { Option } = Select;
  
  //@ATT:this was created to make nested dynamic elements! This is hard!
  const BedForm = (props) =&gt; {
    return (
      &lt;&gt;
        &lt;Form.List name={[props.fieldKey, 'beds']}&gt;
          {(beds, { add, remove }) =&gt; {
            return (
              &lt;div&gt;
                {beds.map((bed, index2) =&gt; (
                  &lt;Space
                    key={bed.key}
                    style={{ display: 'flex', marginBottom: 8 }}
                    align='start'
                  &gt;
                    &lt;Form.Item
                      // name={&quot;aar&quot;}
                      {...bed}
                      name={[bed.name, 'bed']}
                      fieldKey={[bed.fieldKey, 'bed']}
                      key={index2}
                      // noStyle
                      rules={[
                          {
                            required: true, message: 'Beds Missing'
                          },
                        ]}
                    &gt;
                      &lt;Select  placeholder=&quot;Please select a Bed Type&quot;&gt;
                        &lt;Option value='double'&gt;Double(2 person)&lt;/Option&gt;
                        &lt;Option value='single'&gt;Single (1 person)&lt;/Option&gt;
                        &lt;Option value='king'&gt;King Size (2 person)&lt;/Option&gt;
                        &lt;Option value='queen'&gt;Queen Size (2 person)&lt;/Option&gt;
                        &lt;Option value='Bunk'&gt;Bunk Bed (1 person)&lt;/Option&gt;
                        &lt;Option value='sofa'&gt;Sofa Bed (1 person)&lt;/Option&gt;
                      &lt;/Select&gt;
                    &lt;/Form.Item&gt;
                    {/* &lt;MinusCircleOutlined
                      onClick={() =&gt; {
                        remove(bed.name);
                      }}
                    /&gt; */}
                  &lt;/Space&gt;
                ))}
                &lt;Form.Item&gt;
                  &lt;Button
                    type='dashed'
                    onClick={() =&gt; {
                      add();
                    }}
                  &gt;
                    &lt;PlusOutlined /&gt; Add Bed
                  &lt;/Button&gt;
                &lt;/Form.Item&gt;
              &lt;/div&gt;
            );
          }}
        &lt;/Form.List&gt;
      &lt;/&gt;
    );
  };
  
  export default BedForm;
  </code></pre>