react-admin: handle null on ReferenceFields

Question

I have a ReferenceField as follows:

<ReferenceField label="User" source="user_id" reference="users">
    <TextField source="name" />
</ReferenceField>

It works nice but the problem is sometimes user_id might be null and that causes the loading bar to be displayed indefinetely. Is there any way that if the value of the reference field is null to display an alternative text or similar?

Erdman

Answer 1

No, there is no alternative text or something as an option.
Your id being null, should just leave the ReferenceField empty, not displaying loading bar.

---

Changing your ReferenceField element by adding "allowEmpty" and it should work: <ReferenceField label="User" source="user_id" reference="users" allowEmpty>

Lecherous

@PanosVI I don't fully understand what you mean with " Your id being null, should just leave the ReferenceField empty, not displaying loading bar.". In this case user_id is null because the relation is optional. – Erdman

I see. I just thought user_id was not your primary key. – Lecherous

@Erdman In that case, using allowEmpty on your ReferenceField will do the work: <ReferenceField label="User" source="user_id" reference="users" allowEmpty> – Lecherous

@PanosVI same problem, the loading bar keeps showing. Where did you find about the allowEmpty option? I think I read all the docs and didn't find that option – Erdman

@Erdman it's more of a workaround for your problem, as alllowEmpty is originally designed to be used in ReferenceInput. The way it works is to decide if an element with value null will be added to the list of available references for you to select on input. You can check here. I just added it to ReferenceField to solve your styling issue. The loading bar though has its own meaning, showing that something is either fetching, or failed to fetch. For me it works fine for null values. Provide more info if you need further help ;) – Lecherous

it works! I only have another requirement and that would be to be able to add a alternative text for null relations like "None", "--" or similar. Or if you can provide a tutorial in the documentation on how to do this with the FunctionField would be great. The framework rocks btw ;-) – Erdman

Well I have not tried to add alternative text and I don't think this is something you can do with the existing react-admin's elements/components. If displaying alternative text is crucial for your application, you should create a custom component, following the guidance given here. – Lecherous

ok! can you add an answer and so I will close the question? Thanks for your help! – Erdman

I have edited my answer to fit your question's requirements. – Lecherous

Answer 2

Just want to mention here that it seems to me the allowEmpty prop has been removed from the ReferenceField component for newer versions, so the proposed solution did not work for me. I simply created a custom component NullableReferenceField to prevent anything from being rendered (and even an API request from being issued) whenever source is null. You may of course also customize what's being displayed in that case.

import React from "react";
import {
  ReferenceField,
  useRecordContext,
} from "react-admin";

export default function NullableReferenceField({ source, ...props }) {
  const record = useRecordContext();
  if (!record[source]) {
    return null;
  }
  return <ReferenceField source={source} {...rest} />;
}

Snakeroot