@@ -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
336349const choices = [
@@ -353,7 +366,7 @@ const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
353366``` jsx
354367import { 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
366379import { 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