How do I use the react-admin's SelectArrayInput element to send data to the server as an array of objects i.e. { clients: [id: 1, id: 2]}?

Question

In react-admin I have the following ReferenceArrayInput -> SelectArrayInput component as following:

<Create {...props}>
    <SimpleForm>

        <ReferenceArrayInput source="clients" reference="client">
            <SelectArrayInput optionText="clientName" />
        </ReferenceArrayInput>

    </SimpleForm>
</Create>

It works, it receives the data from the client source and id displays the options with the clientName label.

However, when the form is submitted it sends to the server the following request body:

{
   "clients": [1,2,3]
{

I would like to send it as:

{
   "clients": [
     {"id": 1},
     {"id": 2},
     {"id": 3}
   ]
}

Is is possible, by setting some certain option or shall I use a different component?

Gildas Garcia · Accepted Answer · 2021-07-06 13:53:11Z

2

You have two options for this:

Transform the data in your dataProvider

Pass a transform function to the transform prop of your Create or Edit component.

export const UserCreate = (props) => {
    const transform = (data) => ({
        ...data,
        clients: data.clients.map((id) => ({ id })),
    });

    return (
        <Create {...props} transform={transform}>
            // Your inputs
        </Create>
    );
};

answered Jul 6, 2021 at 13:53

Gildas Garcia

7,0663 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cesare Contini Over a year ago

Thansk Gildas, very kind!

Collectives™ on Stack Overflow

How do I use the react-admin's SelectArrayInput element to send data to the server as an array of objects i.e. { clients: [id: 1, id: 2]}?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related