CODEWITHSUNDEEP
react-admin
nwood2009
nwood2009

Reputation: 75

Embed a list/datagrid inside an edit form

I'm new to react and react-admin specifically.

I'm trying to embed a Datagrid inside of an Edit form.

The Edit form props (record) has a child array of objects so I don't need to load the related records from the API using ReferenceManyField or something similar.

But I can't seem to find how to reference an array of the record as a ListProp for the List

If anyone has any examples that would be great.

Thanks

Upvotes: 1

Views: 676

Answers (2)

Christophe
Christophe

Reputation: 953

<ArrayField source='bids'>
  <Datagrid>
    <TextField source='id' />
  </Datagrid>
</ArrayField>

Upvotes: 0

MwamiTovi
MwamiTovi

Reputation: 2502

I'm trying to embed a Datagrid inside of an Edit form.

There is a stark difference in how those two components:

  1. In terms of how the components were built:

    • <Datagrid>
      It is an iterator component: it receives an array of ids, and a data store, and is supposed to iterate over the ids to display each record.

      Another example of iterator component is <SingleFieldList>.

    • <Edit>
      The Edit displays a form initialized with a record fetched from the API. The <Edit> component actually delegates the actual rendering of the form to a form component - usually <SimpleForm> (so you can change the child component, actually).

  2. In terms of mapping API endpoints:

    • <Datagrid>
      It's often used for Read operations thus used at endpoints where you're fetching lists of data e.g. /users or /books. Understanding this point will help you understand why (or how) this components expects the kind of props it accepts.

    • <Edit>
      it's actually used for the Update operations and is therefore used at endpoints where you're fetching one (a specific) data object e.g /users/1 or /books/12. In essence, you fetching a particular user or book (and not the entire list).

So with that understanding and explanation, the simple answer is...
no, you cannot embed a Datagrid inside of an Edit form.

It will literally require you to re-write the two components which defeats the essence of using them in the first place (for this scenario).

Upvotes: 1

Related Questions