React final forms how to add child forms

Question

Have the sandbox with working React forms array https://codesandbox.io/s/react-final-form-field-arrays-react-beatiful-dnd-as-drag-drop-forked-uz24z?file=/index.js:5933-6061

Which in result of click on the add hotspots and generate the data tree as

 {
   "toppings":[
      
   ],
   "customers":[
      {
         "id":4,
         "firstName":"name",
         "lastName":"lastname"
      },
      {
         "id":5,
         "firstName":"Clark",
         "lastName":"kent"
      }
   ],
   "hotspots":[
      {
         "hotspotId":6,
         "positionY":"Xhostspotforcustomer1",
         "positionX":"Yhostspotforcustomer1"
      }
   ]
}

But I need hotspots to be added as children of customer when click on the Add Hotspot button (to same index of the values.customers array) like

{
   "toppings":[
      
   ],
   "customers":[
      {
         "id":4,
         "firstName":"name",
         "lastName":"lastname",
         "hotspots":[
            {
               "hotspotId":6,
               "positionY":"XhostspotforcustomerID4",
               "positionX":"YhostspotforcustomerID4"
            },
            {
               "hotspotId":7,
               "positionY":"more XhostspotforcustomerID4",
               "positionX":"new YhostspotforcustomerID4"
            }
         ]
      },
      {
         "id":5,
         "firstName":"Clark",
         "lastName":"kent",
         "hotspots":[
            {
               "hotspotId":8,
               "positionY":"XhostspotforcustomerID5",
               "positionX":"YhostspotforcustomerID5"
            }
         ]
      }
   ],
   
}

The Add hotspot is added on line 174 of index.js How to modify the code to add hotspots per customer separately ?

Answer 1

you need to combine customer field name with hotspot name:

• when you do push/pop:

push(`${name}.hotspots`, /*...*/)
//...
pop(`${name}.hotspots`)

• also in FieldArray field name:

<FieldArray name={`${name}.hotspots`}>

Demo: https://codesandbox.io/s/react-final-form-field-arrays-react-beatiful-dnd-as-drag-drop-forked-wivwu?file=/index.js

Result:

{
  "toppings": [],
  "customers": [
    {
      "id": 4,
      "firstName": "name",
      "lastName": "lastname",
      "hotspots": [
        {
          "hotspotId": 6,
          "positionY": "Customer4-Y1",
          "positionX": "Customer4-X1"
        },
        {
          "hotspotId": 7,
          "positionY": "Customer4-Y2",
          "positionX": "Customer4-X2"
        }
      ]
    },
    {
      "id": 5,
      "firstName": "Clark",
      "lastName": "kent",
      "hotspots": [
        {
          "hotspotId": 8,
          "positionY": "Customer5-Y1",
          "positionX": "Customer5-X1"
        }
      ]
    }
  ]
}