Custom Field doesn't render passed label

Question

I'm still figuring out how everything works. But I definitely love how easy the pagination and filtering works!

Here is my problem:

I'm trying to build a relatively simple custom Field. It should render a bunch of strings from an array:

const ArrayField = ({ source, record = {} }) => {
  const hasItems = has(record, source);

  return (
    <div>
      {hasItems && record[source].map(item => <div key={item.id}>{item.designation}</div>)}
    </div>
  );
};

ArrayField.propTypes = {
  label: PropTypes.string,
  record: PropTypes.object,
  source: PropTypes.string,
};

In the documentation it says as follows: "Tip: The label attribute isn’t used in the render() method, but admin-on-rest uses it to display the table header."

However, if I pass my label like so, the label isn't displayed:

export const PlaylistShow = (props) => (
  <Show title={<PlaylistTitle/>} {...props}>
    <SimpleShowLayout>
      <TextField source='id' />
      <TextField label='Name' source='designation' />
      <ArrayField label='Media' source='playlistItems' />
    </SimpleShowLayout>
  </Show>
);

Is there a step that I'm missing? Unfortunately I can't figure it out from the documentation.

Looking forward to your answer :)

Answer 1

From the documentation about custom inputs:

Tip: To avoid repeating them each time you use the component, you should define label and addLabel as defaultProps