`<ReferenceArrayInput>`

Use <ReferenceArrayInput> to edit an array of reference values, i.e. to let users choose a list of values (usually foreign keys) from another REST endpoint.

<ReferenceArrayInput> fetches the related resources (using dataProvider.getMany()) as well as possible resources (using dataProvider.getList()) in the reference endpoint.

For instance, if the post object has many tags, a post resource may look like:

{
    "id": 1234,
    "tag_ids": [1, 23, 4]
}

Then <ReferenceArrayInput> would fetch a list of tag resources from these two calls:

http://myapi.com/tags?id=[1,23,4]
http://myapi.com/tags?page=1&perPage=25

Once it receives the deduplicated reference resources, this component delegates rendering to its child component, by providing the possible choices through the ChoicesContext. This context value can be accessed with the useChoicesContext hook.

This means you can use <ReferenceArrayInput> with <SelectArrayInput>, or with the component of your choice, provided they detect a ChoicesContext is available and get their choices from it.

The component expects a source and a reference attributes. For instance, to make the tag_ids for a post editable:

import { ReferenceArrayInput, SelectArrayInput } from 'react-admin';

<ReferenceArrayInput source="tag_ids" reference="tags">
    <SelectArrayInput optionText="name" />
</ReferenceArrayInput>

SelectArrayInput

Properties

Prop	Required	Type	Default	Description
`filter`	Optional	`Object`	`{}`	Permanent filters to use for getting the suggestion list
`label`	Optional	`string`	-	Useful only when `ReferenceArrayInput` is in a Filter array, the label is used as the Filter label.
`page`	Optional	`number`	1	The current page number
`perPage`	Optional	`number`	25	Number of suggestions to show
`reference`	Required	`string`	’’	Name of the reference resource, e.g. ‘posts’.
`sort`	Optional	`{ field: String, order: 'ASC' or 'DESC' }`	`{ field: 'id', order: 'DESC' }`	How to order the list of suggestions
`enableGetChoices`	Optional	`({q: string}) => boolean`	`() => true`	Function taking the `filterValues` and returning a boolean to enable the `getList` call.

Note: <ReferenceArrayInput> doesn’t accept the common input props ; it is the responsability of children to apply them.

Usage

You can tweak how this component fetches the possible values using the page, perPage, sort, and filter props.

// by default, fetches only the first 25 values. You can extend this limit
// by setting the `perPage` prop.
<ReferenceArrayInput
    source="tag_ids"
    reference="tags"
    perPage={100}
>
    <SelectArrayInput optionText="name" />
</ReferenceArrayInput>

// by default, orders the possible values by id desc. You can change this order
// by setting the `sort` prop (an object with `field` and `order` properties).
<ReferenceArrayInput
    source="tag_ids"
    reference="tags"
    sort={{ field: 'title', order: 'ASC' }}
>
    <SelectArrayInput optionText="name" />
</ReferenceArrayInput>

// you can filter the query used to populate the possible values. Use the
// `filter` prop for that.
<ReferenceArrayInput
    source="tag_ids"
    reference="tags"
    filter={{ is_published: true }}
>
    <SelectArrayInput optionText="name" />
</ReferenceArrayInput>

Tip: <ReferenceArrayInput> can also be used with an <AutocompleteArrayInput> to allow filtering the choices. By default, it will fetch the choices on mount, but you can prevent this by using the enableGetChoices. This prop should be a function that receives the filterValues as parameter and return a boolean. In order to also hide the choices when enableGetChoices returns false, you should use shouldRenderSuggestions on the <AutocompleteArrayInput>:

<ReferenceArrayInput
    label="Tags"
    reference="tags"
    source="tags"
    enableGetChoices={({ q }) => (q ? q.length >= 2 : false)}
>
    <AutocompleteArrayInput
        shouldRenderSuggestions={value => value.length >= 2}
    />
</ReferenceArrayInput>