Summary

I’m working on a side-drawer to display an edit form for an object that has nested properties. My manager does not want us to have individual calls to the API to get the nested properties, so this page is designed to get the parent object and display the nested properties to be edited.

We are using the open-source version of React Admin v4.16

The problem I’m having is getting a nested collection of <Insert> objects to render with data and have blank forms, in numerical order of the property Insert.hopper.

The collection in the data layer is 0 to many, but for the display we need 6 Insert edit forms, whether they exist or not.

The object Insert is of type IInsert:

IInsert extends RaRecord {
    id: Identifier,
    inventoryItemId: number,
    hopper: number,
    cameraEnabled: boolean,
    isActive: boolean,
    expiryDate: Date | undefined,
}

I have tried using React-Admin’s <ArrayInput> with the <SimpleFormIterator>, but I have been unsuccessful to get any existing data to bind while adding static blank forms for new <Insert> objects.

Attempt 1

This is a snippet of my code for my first attempt using an <ArrayInput> with the <SimpleFormIterator>. insertsList is an array of IInsert objects with the hopper value defined as 1-6.

I was expecting the <SimpleFormIterator> to automatically bind the data using the source property, but this did not work.

      <VerticalAccordianDetails>
       <ArrayInput source="inserts" label="">
        <SimpleFormIterator
         fullWidth
         disableReordering
         sx={{
          [`& .RaSimpleFormIterator-line`]: { marginTop: '10px' },
         }}>
          {insertsList.map((insert: IInsert) => 
           <Fragment key={insert.hopper}>
            <SelectInput 
             label={`Hopper ${insert.hopper}`}
             name={`hopper-${insert.hopper}`}
             source="inventoryItemId"
             choices={insertsData}
             optionText="sku"
             optionValue="id"
             resettable
            />
            <BooleanInput source="cameraEnabled" label="Camera Enabled" />
            <BooleanInput source="isActive" label="Is Active" defaultValue={true} />
            <DateInput source="expiryDate" label="Expiry Date" />
           </Fragment>
          )}
        </SimpleFormIterator>
       </ArrayInput>
      </VerticalAccordianDetails>

Attempt 2

My second attempt was to write a function to iterate through the list of inserts received from the parent object when the page first loads. This also did not work as expected because the data is still not binding.

Function

  let insertsListIndexes = [0,1,2,3,4,5]
  let insertsList: IInsert[] = [];
  if (documentConfigurationData && documentConfigurationData.inserts) {
    console.log("Entering function to iterate through inserts...")
    console.log(`Inserts list received: ${JSON.stringify(documentConfigurationData.inserts)}`)
    insertsListIndexes.forEach(function(index) {
      let hopper = index + 1

      console.log(`Working on hopper ${hopper}...`)

      let insert = documentConfigurationData.inserts.filter( (insert: any) => insert.hopper === hopper)[0]
      if (insert) {
        console.log(`Found existing insert for hopper ${hopper} = ${JSON.stringify(insert)}`)

        insertsList.push(insert)
      } else {
        console.log(`No existing insert found for hopper ${hopper}. Adding new one...`)
        let newInsert = {
          id: '',
          inventoryItemId: 0,
          hopper: hopper,
          cameraEnabled: false,
          isActive: true,
          expiryDate: undefined
        }

        insertsList.push(newInsert)
        console.log(`New insert added: ${JSON.stringify(newInsert)}`)
      }

      console.log(`Finished iterating through inserts. Final list: ${JSON.stringify(insertsList)}`)
    })
  }

Console Output

Finished iterating through inserts. Final list: 
[{"id":"","inventoryItemId":0,"hopper":1,"cameraEnabled":false,"isActive":true},
{"id":"","inventoryItemId":0,"hopper":2,"cameraEnabled":false,"isActive":true},
{"id":"","inventoryItemId":0,"hopper":3,"cameraEnabled":false,"isActive":true},
{"id":"","inventoryItemId":0,"hopper":4,"cameraEnabled":false,"isActive":true},
{"id":1,"documentConfigurationId":1,"inventoryItemId":2,"hopper":5,"cameraEnabled":false,"isActive":false,"expiryDate":"2024-07-21"},
{"id":"","inventoryItemId":0,"hopper":6,"cameraEnabled":false,"isActive":true}]

Component

      <VerticalAccordianDetails>
       {insertsList.length === 6 && insertsList.map((insert: IInsert) => 
        <Fragment key={insert.hopper}>
         <SelectInput 
          label={`Hopper ${insert.hopper}`}
          name={`hopper-${insert.hopper}`}
          source="inventoryItemId"
          value={insert.inventoryItemId}
          choices={insertsData}
          optionText="sku"
          optionValue="id"
          resettable
         />
         <BooleanInput source={`${insert.cameraEnabled}`} label="Camera Enabled" />
         <BooleanInput source={`${insert.isActive}`} label="Is Active" defaultValue={true} />
         <DateInput source={`${insert.expiryDate}`} label="Expiry Date" />
         <hr />
        </Fragment>
       )}
      </VerticalAccordianDetails>

Additional Concerns

My concern with this approach is that I will be breaking the auto-bind functionality of react-admin and complicate the data further down when it comes to saving. Any advice for this is also welcome.