Skip to content

Commit 4231cab

Browse files
committed
Fix typo
1 parent af55912 commit 4231cab

File tree

1 file changed

+13
-7
lines changed

1 file changed

+13
-7
lines changed

docs/ReferenceField.md

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ storybook_path: ra-ui-materialui-fields-referencefield--basic
66

77
# `<ReferenceField>`
88

9-
`<ReferenceField>` is useful for displaying many-to-one and one-to-one relationships, e.g. the details of a user when rendering a post authored by that user.
9+
`<ReferenceField>` is useful for displaying many-to-one and one-to-one relationships, e.g. the details of a user when rendering a post authored by that user.
1010

1111
<iframe src="https://www.youtube-nocookie.com/embed/UeM31-65Wc4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="aspect-ratio: 16 / 9;width:100%;margin-bottom:1em;"></iframe>
1212

@@ -46,7 +46,7 @@ export const PostShow = () => (
4646

4747
![ReferenceField](./img/reference_field_show.png)
4848

49-
So it's a good idea to configure the `<Resource recordRepresentation>` to render related records in a meaningul way. For instance, for the `users` resource, if you want the `<ReferenceField>` to display the full name of the author:
49+
So it's a good idea to configure the `<Resource recordRepresentation>` to render related records in a meaningful way. For instance, for the `users` resource, if you want the `<ReferenceField>` to display the full name of the author:
5050

5151
```jsx
5252
<Resource
@@ -64,9 +64,9 @@ Alternately, if you pass a child component, `<ReferenceField>` will render it in
6464
</ReferenceField>
6565
```
6666

67-
This component fetches a referenced record (`users` in this example) using the `dataProvider.getMany()` method, and passes it to its child.
67+
This component fetches a referenced record (`users` in this example) using the `dataProvider.getMany()` method, and passes it to its child.
6868

69-
It uses `dataProvider.getMany()` instead of `dataProvider.getOne()` [for performance reasons](#performance). When using several `<ReferenceField>` in the same page (e.g. in a `<DataTable>`), this allows to call the `dataProvider` once instead of once per row.
69+
It uses `dataProvider.getMany()` instead of `dataProvider.getOne()` [for performance reasons](#performance). When using several `<ReferenceField>` in the same page (e.g. in a `<DataTable>`), this allows to call the `dataProvider` once instead of once per row.
7070

7171
## Props
7272

@@ -97,7 +97,8 @@ By default, `<ReferenceField>` renders the `recordRepresentation` of the referen
9797
</ReferenceField>
9898
```
9999

100-
Alternatively, you can use [the `render` prop](#render) to render the referenced record in a custom way.
100+
Alternatively, you can use [the `render` prop](#render) to render the referenced record in a custom way.
101+
101102
## `empty`
102103

103104
`<ReferenceField>` can display a custom message when the referenced record is missing, thanks to the `empty` prop.
@@ -179,6 +180,7 @@ Use the `queryOptions` prop to pass options to [the `dataProvider.getMany()` que
179180
For instance, to pass [a custom `meta`](./Actions.md#meta-parameter):
180181

181182
{% raw %}
183+
182184
```jsx
183185
<ReferenceField
184186
source="user_id"
@@ -188,6 +190,7 @@ For instance, to pass [a custom `meta`](./Actions.md#meta-parameter):
188190
<TextField source="name" />
189191
</ReferenceField>
190192
```
193+
191194
{% endraw %}
192195

193196
## `reference`
@@ -246,7 +249,7 @@ To override the style of all instances of `<ReferenceField>` using the [applicat
246249

247250
<iframe src="https://www.youtube-nocookie.com/embed/egBhWqF3sWc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="aspect-ratio: 16 / 9;width:100%;margin-bottom:1em;"></iframe>
248251

249-
When used in a `<DataTable>`, `<ReferenceField>` fetches the referenced record only once for the entire table.
252+
When used in a `<DataTable>`, `<ReferenceField>` fetches the referenced record only once for the entire table.
250253

251254
![ReferenceField](./img/reference-field.png)
252255

@@ -302,6 +305,7 @@ When you know that a page will contain a `<ReferenceField>`, you can configure t
302305
For example, the following code prefetches the authors referenced by the posts:
303306

304307
{% raw %}
308+
305309
```jsx
306310
const PostList = () => (
307311
<List queryOptions={{ meta: { prefetch: ['author'] } }}>
@@ -315,6 +319,7 @@ const PostList = () => (
315319
</List>
316320
);
317321
```
322+
318323
{% endraw %}
319324

320325
**Note**: For prefetching to function correctly, your data provider must support [Prefetching Relationships](./DataProviders.md#prefetching-relationships). Refer to your data provider's documentation to verify if this feature is supported.
@@ -406,5 +411,6 @@ For instance, given the following `ReferenceField`:
406411
```
407412

408413
React-Admin will call `canAccess` with the following parameters:
414+
409415
- If the `users` resource has a Show view: `{ action: "show", resource: 'posts', record: Object }`
410-
- If the `users` resource has an Edit view: `{ action: "edit", resource: 'posts', record: Object }`
416+
- If the `users` resource has an Edit view: `{ action: "edit", resource: 'posts', record: Object }`

0 commit comments

Comments
 (0)