diff --git a/docs/Fields.md b/docs/Fields.md
index 9ee1dbac162..e8507d36c56 100644
--- a/docs/Fields.md
+++ b/docs/Fields.md
@@ -106,6 +106,17 @@ Then you can display the author first name as follows:
```
+**Tip**: If you want to display data from more than one field, check out [the ``](#functionfield), which accepts a `render` function:
+
+```jsx
+import { FunctionField } from 'react-admin';
+
+ `${record.first_name} ${record.last_name}`}
+/>;
+```
+
**Tip**: If you want to format a field according to the value, use a higher-order component to do conditional formatting, as described in the [Theming documentation](./Theming.md#conditional-formatting).
**Tip**: If your interface has to support multiple languages, don't use the `label` prop, and put the localized labels in a dictionary instead. See the [Translation documentation](./Translation.md#translating-resource-and-field-names) for details.
@@ -537,6 +548,17 @@ import { TextField } from 'react-admin';
```
+**Tip**: If you want to display data from more than one field, check out [the ``](#functionfield), which accepts a `render` function:
+
+```jsx
+import { FunctionField } from 'react-admin';
+
+ `${record.first_name} ${record.last_name}`}
+/>;
+```
+
### ``
`` displays a url in a Material UI's `` component.
@@ -1341,20 +1363,43 @@ PriceField.defaultProps = {
```
{% endraw %}
-### Adding Label To Custom Field Components In The Show View
+### Adding A Label To Custom Field Components
-React-admin lets you use the same `Field` components in the `List` view and in the `Show` view. But if you use the `` custom field component defined earlier in a `Show` view, something is missing: the `Field` label. Why do other fields have a label and not this custom `Field`? And how can you create a `Field` component that has a label in the `Show` view, but not in the `List` view?
+When you use one of the react-admin `Field` components in an `Edit`, `Create` or `Show` view, react-admin includes a label on top of the field value, as in the following example:
-React-admin uses a trick: the `Show` view layouts (`` and ``) inspect their `Field` children, and whenever one has the `addLabel` prop set to `true`, the layout adds a label.
+![field labels](./img/field-addlabel.png)
-That means that the only thing you need to add to a custom component to make it usable in a `Show` view is an `addLabel: true` default prop.
+For your custom fields, however, the label doesn't appear by default. You need to opt in this feature by setting the `addLabel` prop to `true` in the `defaultProps`.
+
+```diff
+const FullNameField = ({ record = {} }) => (
+
+ {record.firstName} {record.lastName}
+
+);
-```js
FullNameField.defaultProps = {
- addLabel: true,
+ label: 'Name',
++ addLabel: true,
};
```
+React-admin uses a trick to make it work: the view layouts (``, ``, ``, ``) inspect their children, and whenever one has the `addLabel` prop set to `true`, the layout decorates the component with a label.
+
+If you don't use any of these layouts, the `addLabel` trick won't work. You'll have to add a label manually by decorating your field with [the `` component](./Inputs.md#using-labeled):
+
+```jsx
+import { Labeled } from 'react-admin';
+
+const MyShowLayout = ({ record }) => (
+
+
+
+
+
+);
+```
+
### Hiding A Field Based On The Value Of Another
In a Show view, you may want to display or hide fields based on the value of another field - for instance, show an `email` field only if the `hasEmail` boolean field is `true`.
diff --git a/docs/img/field-addlabel.png b/docs/img/field-addlabel.png
new file mode 100644
index 00000000000..980e94b3612
Binary files /dev/null and b/docs/img/field-addlabel.png differ