FormDataConsumer inside ArrayInput is adding its source prop to each array item (usually undefined)

[martdavidson]

What you were expecting:

Expected to be able to use a <FormDataConsumer> inside an <ArrayInput><SimpleFormIterator></SimpleFormIterator></ArrayInput> as described in https://marmelab.com/react-admin/Inputs.html#linking-two-inputs:

import {
  ArrayInput,
  Create,
  FormDataConsumer,
  SelectInput,
  SimpleForm,
  SimpleFormIterator,
  TextInput,
} from 'react-admin';
import {useFormContext} from 'react-hook-form';

const TestingCreate = () => {
  return (
    <Create>
      <SimpleForm>
        <TestingCreateLayout />
      </SimpleForm>
    </Create>
  );
};

const TestingCreateLayout = () => {
  const form = useFormContext();
  console.log(form.getValues());
  
  return (
    <ArrayInput source="authors">
      <SimpleFormIterator>
        <TextInput source="name" />
        <FormDataConsumer>
          {({
              formData, // The whole form data
              scopedFormData, // The data for this item of the ArrayInput
              getSource, // A function to get the valid source inside an ArrayInput
              ...rest
            }) =>
            scopedFormData && scopedFormData.name ? (
              <SelectInput
                source={getSource?.('role')} // Will translate to "authors[0].role"
                choices={[{ id: 1, name: 'Head Writer' }, { id: 2, name: 'Co-Writer' }]}
                {...rest}
              />
            ) : null
          }
        </FormDataConsumer>
      </SimpleFormIterator>
    </ArrayInput>
  );
};

What happened instead:

It looks like <FormDataConsumer> is being treated as an additional field by the SimpleFormIterator - because there is no source prop, it's adding an entry of undefined: "" to each item in the authors array. If I do <FormDataConsumer source={'something'}>, then it shows something: "" in each entry instead.

{
    "authors": [
        {
            "name": "MyName",
            "undefined": "",
            "role": 1
        }
    ]
}

Steps to reproduce:

Past the above in a Resources create prop and check the console after adding an item.

Environment

• React-admin version: react-admin@4.2.5
• React version: react@18.2.0
• Browser: Chrome on macOS

[martdavidson]

https://codesandbox.io/s/inspiring-rain-mn5iwf?file=/src/index.tsx

Navigate the imbeded browser to https://mn5iwf.sse.codesandbox.io/#/posts/create if it's not already there and watch the console as you add items.

[fzaninotto]

Reproduced, thanks!

[martdavidson]

Hey, thanks so much for the quick fix.