react-admin ReferenceField label not showing when used in a custom component

Question

So I need a ReferenceField to access data from another table. Since I am doing this often i extracted this in a custom component

CustomField.tsx

const CustomField = (props: any) => {
    const record = useRecordContext();
    return (
        <ReferenceField
            record={record}
            source="someId"
            reference="table"
            link="show"
                        label="some label"
            {...props}
        >
            <TextField source="name" />
        </ReferenceField>
    );
};

now when i use the component:

<CustomField/>

everithing is working fine, data is displayed fine, except no label is shown.

So I am expecting some form of label at the top but no signs. If I do it without creating a custom field, everything is working just fine, the label and sorting is there. But when I extract the code into a separate component it doesn't seem to work.

Looks like the attributes lose their default values and behavior when extracted to a separate component. My current workaround

<OrganisationField label="Some label" sortBy="something" />

that is fine, it works but it's not practical (and it's annoying) to do this everytime I or someone else wants to use the component, since that should already be defined inside it.

Answer 1

When you say "no label is shown", I assume that's when you use your custom Field inside a Datagrid.

Datagrid inspects its children for their label prop to display the column header. To make your label inspect-able, declare it as defaultProp:

CustomField.defaultProps = {
    label: "someId"
}

This is explained in the react-admin "writing a custom field" documentation: https://marmelab.com/react-admin/Fields.html#writing-your-own-field-component