React-Admin: How do I handle an input source on a list of objects

Question

In react-admin, I have an input whose source is a list of objects.

<CheckboxGroupInput  source="binded_cameras" choices={choices}/>

The binded_cameras list looks like this:

"binded_cameras": [
    {
       "id": 1,
       "name": "Cam 1",
       "url": "dummyurl.com"
    },
    {
       "id": 4,
       "name": "Cam 2",
       "url": "dummyurl.com"
     }
]

I am trying to get only the list of id to deal with.
I tried binded_cameras.id but of course it did not work.
How do I manipulate this list of objects, and generate only a list of ids?

What exactly are you trying to achieve here? Do you want to only pass the list of ids as the source? — MwamiTovi
– MwamiTovi, Commented Apr 28, 2020 at 14:31
Yes, exactly. I found a solution by modifying the incoming data, but I'd appreciate knowing how to do that on reactjs. — Borhink
– Borhink, Commented Apr 29, 2020 at 15:11

gstvg · Accepted Answer · 2020-05-02 06:18:59Z

2

Since React-admin uses react-final-form, you can it's use parse() and format() functions to transform the input value when saving to and loading from the record, just pass them as props to Input, in this case CheckboxGroupInput:

Mnemonic for the two functions:

parse(): input -> record

format(): record -> input

<CheckboxGroupInput 
    source="binded_cameras" 
    choices={choices}
    parse={ids => ids.map(id => ({id}))}
    format={bindedCameras => bindedCameras.map(b => b.id)}
/>

https://marmelab.com/react-admin/Inputs.html#transforming-input-value-tofrom-record

edited May 2, 2020 at 6:18

answered May 2, 2020 at 6:08

gstvg

9275 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

React-Admin: How do I handle an input source on a list of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related