Skip to content

Commit da6a09f

Browse files
committed
Adapt AutocompleteInput documentation to AutocompleteArrayInput
1 parent 437e5b4 commit da6a09f

1 file changed

Lines changed: 28 additions & 15 deletions

File tree

docs/AutocompleteArrayInput.md

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -310,27 +310,40 @@ If a prompt is not enough, you can use [the `create` prop](#create) to render a
310310

311311
## `optionText`
312312

313-
You can customize the properties to use for the option name (instead of the default `name`) thanks to the `optionText` prop:
313+
By default, `<AutocompleteArrayInput>` uses the `name` property as the text content of each option.
314314

315315
```jsx
316-
const choices = [
317-
{ id: 'admin', label: 'Admin' },
318-
{ id: 'u001', label: 'Editor' },
319-
{ id: 'u002', label: 'Moderator' },
320-
{ id: 'u003', label: 'Reviewer' },
321-
];
322-
<AutocompleteArrayInput source="roles" choices={choices} optionText="label" />
316+
import { AutocompleteArrayInput } from 'react-admin';
317+
318+
<AutocompleteArrayInput
319+
source="categories"
320+
choices={[
321+
{ id: 'tech', name: 'Tech' },
322+
{ id: 'lifestyle', name: 'Lifestyle' },
323+
{ id: 'people', name: 'People' },
324+
]}
325+
/>
326+
// renders the following list of choices
327+
// - Tech
328+
// - Lifestyle
329+
// - People
323330
```
324331

325-
`optionText` is especially useful when the choices are records coming from a `<ReferenceArrayInput>` or a `<ReferenceManyToManyInput>`. By default, react-admin uses the [`recordRepresentation`](./Resource.md#recordrepresentation) function to display the record label. But if you set the `optionText` prop, react-admin will use it instead.
332+
If your `choices` don't have a `name` property, or if you want to use another property, you can use the `optionText` prop to specify which property to use:
326333

327334
```jsx
328-
<ReferenceArrayInput source="tag_ids" reference="tags">
329-
<AutocompleteArrayInput optionText="tag" />
330-
</ReferenceArrayInput>
335+
<AutocompleteArrayInput
336+
source="categories"
337+
optionText="label"
338+
choices={[
339+
{ id: 'tech', label: 'Tech' },
340+
{ id: 'lifestyle', label: 'Lifestyle' },
341+
{ id: 'people', label: 'People' },
342+
]}
343+
/>
331344
```
332345

333-
`optionText` also accepts a function, so you can shape the option text based on the entire choice object:
346+
`optionText` also accepts a function, so you can shape the option text at will:
334347

335348
```jsx
336349
const choices = [
@@ -353,7 +366,7 @@ const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
353366
```jsx
354367
import { AutocompleteArrayInput, ReferenceArrayInput } from 'react-admin';
355368

356-
<ReferenceArrayInput label="Author" source="author_id" reference="authors">
369+
<ReferenceArrayInput label="Author" source="authors_ids" reference="authors">
357370
<AutocompleteArrayInput />
358371
</ReferenceArrayInput>
359372
```
@@ -365,7 +378,7 @@ But if you set the `optionText` prop, react-admin uses it instead of relying on
365378
```jsx
366379
import { AutocompleteArrayInput, ReferenceArrayInput } from 'react-admin';
367380

368-
<ReferenceArrayInput label="Author" source="author_id" reference="authors">
381+
<ReferenceArrayInput label="Author" source="authors_ids" reference="authors">
369382
<AutocompleteArrayInput optionText="last_name" />
370383
</ReferenceArrayInput>
371384
```

0 commit comments

Comments
 (0)