Search code examples
reactjstypescriptreact-admin

ReferenceField is not working react-admin


I am trying to implement a table showing a list of items. I followed the source code at https://github.com/marmelab/react-admin/tree/master/examples/demo

The expected result for the table: https://marmelab.com/react-admin-demo/

enter image description here

But this is what I'm getting:

enter image description here

I checked my code over and over and I even tried copying the code at: https://github.com/marmelab/react-admin/blob/master/examples/demo/src/invoices/InvoiceList.tsx but the customer and order columns just won't render although under the hood, fakeRest is fetching the data:

enter image description here

so I suspect it is the rendering part that is the issue.

How to replicate:

  1. git clone https://github.com/CrownKira/digitalace-frontend.git
  2. cd to root and run yarn install then yarn dev
  3. point your browser to http://localhost:3000/#/invoices and observe that customer and order are not there even though the data is fetched (see under Network tab) (you can try to switch from json-server to fakeRest (under src/index.ts) and the result is still the same).

Solution

  • I believe you didn't add the customers resource in App.tsx. As per the documentation

    You must add a <Resource> for the reference resource - react-admin needs it to fetch the reference data. You can omit the list prop in this reference if you want to hide it in the sidebar menu.

    If you add customers as a Resource, you'd see the referencing and rendering perfectly.

    <Resource name="customers"/>