Skip to content

Commit af55912

Browse files
committed
Fix bad syntax
1 parent 3b49e2b commit af55912

File tree

1 file changed

+9
-14
lines changed

1 file changed

+9
-14
lines changed

docs/ReferenceArrayField.md

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Use `<ReferenceArrayField>` to display a list of related records, via a one-to-m
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

13-
`<ReferenceArrayField>` fetches a list of referenced records (using the `dataProvider.getMany()` method), and puts them in a [`ListContext`](./useListContext.md). It then renders each related record, using its [`recordRepresentation`](./Resource.md#recordrepresentation), in a [`<ChipField>`](./ChipField.md).
13+
`<ReferenceArrayField>` fetches a list of referenced records (using the `dataProvider.getMany()` method), and puts them in a [`ListContext`](./useListContext.md). It then renders each related record, using its [`recordRepresentation`](./Resource.md#recordrepresentation), in a [`<ChipField>`](./ChipField.md).
1414

1515
**Tip**: If the relationship is materialized by a foreign key on the referenced resource, use [the `<ReferenceManyField>` component](./ReferenceManyField.md) instead.
1616

@@ -100,7 +100,7 @@ You can change how the list of related records is rendered by passing a custom c
100100

101101
## `children`
102102

103-
By default, `<ReferenceArrayField>` renders one string by related record, via a [`<SingleFieldList>`](./SingleFieldList.md) with a [`<ChipField>`](./ChipField.md) using the resource [`recordRepresentation`](./Resource.md#recordrepresentation).
103+
By default, `<ReferenceArrayField>` renders one string by related record, via a [`<SingleFieldList>`](./SingleFieldList.md) with a [`<ChipField>`](./ChipField.md) using the resource [`recordRepresentation`](./Resource.md#recordrepresentation).
104104

105105
![ReferenceArrayField with default children](./img/ReferenceArrayField-default-child.png)
106106

@@ -130,7 +130,7 @@ Is equivalent to:
130130
- [`<SimpleList>`](./SimpleList.md)
131131
- [`<EditableDatagrid>`](./EditableDatagrid.md)
132132
- [`<Calendar>`](./Calendar.md)
133-
- Or a component of your own (check the [`<WithListContext>`](./WithListContext.md) and the [`useListContext`](./useListContext.md) chapters to learn how).
133+
- Or a component of your own (check the [`<WithListContext>`](./WithListContext.md) and the [`useListContext`](./useListContext.md) chapters to learn how).
134134

135135
For instance, use a `<DataTable>` to render the related records in a table:
136136

@@ -187,21 +187,12 @@ export const PostShow = () => (
187187

188188
## `filter`
189189

190-
`<ReferenceArrayField>` fetches all the related records, and displays them all, too. You can use the `filter` prop to filter the list of related records to display (this works by filtering the records client-side, after the fetch).
191-
)} />
192-
<EditButton />
193-
</SimpleShowLayout>
194-
</Show>
195-
);
196-
```
197-
198-
## `filter`
199-
200190
`<ReferenceArrayField>` fetches all the related records, and displays them all, too. You can use the `filter` prop to filter the list of related records to display (this works by filtering the records client-side, after the fetch).
201191

202192
For instance, to render only tags that are 'published', you can use the following code:
203193

204194
{% raw %}
195+
205196
```jsx
206197
<ReferenceArrayField
207198
label="Tags"
@@ -210,6 +201,7 @@ For instance, to render only tags that are 'published', you can use the followin
210201
filter={{ is_published: true }}
211202
/>
212203
```
204+
213205
{% endraw %}
214206

215207
## `label`
@@ -272,9 +264,11 @@ Use the `queryOptions` prop to pass options to [the `dataProvider.getMany()` que
272264
For instance, to pass [a custom `meta`](./Actions.md#meta-parameter):
273265

274266
{% raw %}
267+
275268
```jsx
276269
<ReferenceArrayField queryOptions={{ meta: { foo: 'bar' } }} />
277270
```
271+
278272
{% endraw %}
279273

280274
## `render`
@@ -325,6 +319,7 @@ By default, the related records are displayed in the order in which they appear
325319
For instance, to sort tags by title in ascending order, you can use the following code:
326320

327321
{% raw %}
322+
328323
```jsx
329324
<ReferenceArrayField
330325
label="Tags"
@@ -333,6 +328,7 @@ For instance, to sort tags by title in ascending order, you can use the followin
333328
sort={{ field: 'title', order: 'ASC' }}
334329
/>
335330
```
331+
336332
{% endraw %}
337333

338334
## `sx`: CSS API
@@ -344,4 +340,3 @@ The `<ReferenceArrayField>` component accepts the usual `className` prop. You ca
344340
| `& .RaReferenceArrayField-progress` | Applied to the Material UI's `LinearProgress` component while `isPending` prop is `true` |
345341

346342
To override the style of all instances of `<ReferenceArrayField>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaReferenceArrayField` key.
347-

0 commit comments

Comments
 (0)