Showing an array in React-Admin

Question

I'm trying to create a phonebook app using react-admin. I created a dataProvider and i want to display the number and type together, how should I do this? It does not show me any number or type in the output.

dataprovider.js

import fakeDataProvider from 'ra-data-fakerest';

const dataProvider = fakeDataProvider({
  contacts: [
    {
      id: 1,
      name: "jack",
      numbers: [
        {number: '09367371111', typeId: 1},
        {number: '36059988', typeId: 2},
      ],
    },
    {
      id: 2,
      name: "sara",
      numbers: [
        {number: '09365551111', typeId: 1},
      ],
    },
  ],
  typeCalls: [
    {id: 1, type: 'Mobile'},
    {id: 2, type: 'Home'},
    {id: 3, type: 'Work'},
    {id: 4, type: 'Other'},
  ],
});

export default dataProvider;

contacts.js

/// --- Show ---
export const ShowContact = (props) => {
  return (
    <Show {...props} actions={<ShowActionsOnTopToolbar/>} title={<ContactTitle/>}>
      <SimpleShowLayout>
        <TextField source="id"/>
        <TextField source="name"/>

        <ReferenceArrayField source="numbers" reference="contacts">
          <Datagrid>
            <TextField source="number"/>
            <TextField source="type"/>
          </Datagrid>
        </ReferenceArrayField>

      </SimpleShowLayout>
    </Show>
  )
};

score 1 · Answer 1 · answered Dec 02 '20 at 15:21

ReferenceArrayField is used to reference a table/set outside of the current record. Hence referencing the contacts while rendering the contacts themselves is not really sensible but also no referencing is needed as for the structure of your data.

The plain ArrayField should do the job as the record's numbers field is already an array with objects - just iterate them this way:

*Note you have a typo on the snippet above on type -> typeId. Sources should match API prop names strictily.

<ArrayField source="numbers">
  <Datagrid>
      <TextField source="number"/>
      <TextField source="typeId"/>
  </Datagrid>
</ArrayField>

Showing an array in React-Admin

1 Answers1