Can I use ReferenceArrayInput to edit a list of objects (not just a list of IDs)?

Question

In React-Admin I have an item I am trying to administer, it looks a bit like this:

{
  "title": "Title of my record",
  "source_id": "525560",
  "source_timestamp": 1547732039,
  "tags": [
    {
      "id": 9,
      "name": "Tag0",
      "description": "Descriptio of tag 0"
    },
    {
      "id": 10,
      "name": "Tag1",
      "description": "Descriptio of tag 1"
    }
  ]
}

The tags are given as a list of objects inside the main item.

I want to be able to admin this, but the code I have inside my Edit view is wrong:

export const IncidentEdit = props => {
    var _tag_ids = [1,2,3,4];
    return <Edit title={<IncidentTitle/>} {...props}>
        <SimpleForm>
            <TextInput fullWidth source="title"/>
            <TextField source="description"/>

            <ReferenceArrayInput label="tags" reference="tag" source="tags">
                <SelectArrayInput>
                    <ChipField source="name"/>
                </SelectArrayInput>
            </ReferenceArrayInput>

        </SimpleForm>
    </Edit>
};

This does not work because ReferenceArrayInput expects record.tags to be a list of tag foreign keys. Its actually a list of tags (so we don't actually have to look anything up). It also fails, because what it returns is a list of foreign keys - whereas the API is just expecting a list of tag objects back.

We might argue that the API is badly designed, but can React Admin accommodate this?

Is there a way for me to translate these records into list of forign-key IDs before I feed them into ReferenceArrayInput and then do the reverse before I send them back to the API? Alternativly, I could just change the APIs so that it only returns the foreign-keys and not the actual tag objects.

Kia Kaha · Accepted Answer · 2020-09-29 10:57:32Z

1

In this case seems like you don't have to fetch additional data. Your API response is ok, maybe only the aproach is not the right one.

Why not using the ArrayInput with SimpleIterator? It allows you to edit all the fields inside the nested records and even use ReferenceInputs if needed.

<ArrayInput source="tags">
    <SimpleFormIterator>
        <TextInput source="id" disabled />
        <TextInput source="name" />
        <TextInput source="description" />
    </SimpleFormIterator>
</ArrayInput>

answered Sep 29, 2020 at 10:57

Kia Kaha

1,8291 gold badge23 silver badges43 bronze badges

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

6 Comments

Dimitri Kopriwa Over a year ago

It doesn't work with tagIds, how can I retrieve tag using ReferenceArrayInput and show a SimpleFormIterator within it?

Kia Kaha Over a year ago

Please open a new thread and ping me in there. It seems like your issues is different.

Matthias Wuttke Over a year ago

I'm having the same problem as Salim. While this approach works for me, I'd prefer to use the ReferenceArrayInput component. I'm thinking about making an own version that supports this kind of reference list.

Kia Kaha Over a year ago

@MatthiasWuttke ReferenceArrayInput will work if the tags are actually obtained via a separate request to another endpoint.

Matthias Wuttke Over a year ago

Thanks - that's great. Do you have any info on how to tell the component in which field the ID is?

|

Collectives™ on Stack Overflow

Can I use ReferenceArrayInput to edit a list of objects (not just a list of IDs)?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related