<ArrayInput> with <SimpleFormIterator> of React Admin generate wrong output

Question

For the following:

<ArrayInput source="slotCaps" label="Schedule Caps">
    <SimpleFormIterator>
        <Box display="flex">
            <Box mr="0.5em">
                <NumberInput source="cap" step={1}/>
            </Box>
            <Box ml="0.5em">
                <SelectInput
                    source="period"
                    choices={[
                        {id: "0", name: "Day"},
                        {id: "1", name: "Week"},
                        {id: "2", name: "Month"}
                    ]}
                />
            </Box>
        </Box>
    </SimpleFormIterator>
</ArrayInput>

I get:

{
    "name": "test 5",
    "description": "test 5",
    "slotCaps": [
        {},
        {}
    ],
    "cap": 1,
    "period": "0"
}

I was expecting:

{
    "name": "test 5",
    "description": "test 5",
    "slotCaps": [
        {"cap": 1, "period": "0"},
    ],
}

Any idea what I am doing wrong? Could someone please explain what I have to change to obtain the second variant? Thank you.

Edit

Not sure why but for some reason this works:

<ArrayInput source="slotCaps" label="Schedule Caps">
    <SimpleFormIterator>
        <NumberInput source="cap" step={1}/>
            <SelectInput
                source="period"
                choices={[
                    {id: 1, name: "Day"},
                    {id: 2, name: "Week"},
                    {id: 3, name: "Month"}
                ]}
                optionValue={"name"}
            />
    </SimpleFormIterator>
</ArrayInput>

If anyone knows how to make the first variant work please provide your input. I need the fields to be formatted properly and it looks like using the Box element is the best way to achieve that.

Thank you.

Kévin HERRERO · Accepted Answer · 2021-03-04 14:02:53Z

Input components must be the first-level children of SimpleFormIterator, not nested ones.

If you wish to use nested Input components, which is useful for displaying the form properly with material-ui Box elements, you need to use a FormDataConsumer, like below:

    <ArrayInput source="slotCaps" label="Schedule Caps">
      <SimpleFormIterator>
        <FormDataConsumer>
          {({ getSource, scopedFormData }) => {
            return (
              <Box display="flex">
                <Box mr="0.5em">
                  <NumberInput
                    source={getSource("cap")}
                    record={scopedFormData}
                    step={1}
                  />
                </Box>
                <Box ml="0.5em">
                  <SelectInput
                    source={getSource("period")}
                    record={scopedFormData}
                    choices={[
                      { id: "0", name: "Day" },
                      { id: "1", name: "Week" },
                      { id: "2", name: "Month" },
                    ]}
                  />
                </Box>
              </Box>
            );
          }}
        </FormDataConsumer>
      </SimpleFormIterator>
    </ArrayInput>

Then, for each Input component, all you need to do is add getSource in the source prop and scopedFormData to the record prop.

Shure Alekseev · Accepted Answer · 2020-05-19 10:14:10Z

0

remove source from NumberInput and SelectInput

answered May 19, 2020 at 10:14

Shure Alekseev

615 bronze badges

Collectives™ on Stack Overflow

<ArrayInput> with <SimpleFormIterator> of React Admin generate wrong output

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related