ArrayInput with FormDataConsumer does not accept Fields

[MicroJackson]

What you were expecting: That the example of the documentation of ArrayInput with FormDataConsumer works: https://marmelab.com/react-admin/Inputs.html#arrayinput

What happened instead: No Fields or CustomFields are shown, only React Admin Inputs are shown.

Steps to reproduce:

1. Goto: https://codesandbox.io/s/affectionate-austin-8rg8j?file=/src/posts/PostEdit.js
2. Edit a Post.
3. Add Item to backlinks.
4. Only Inputs are shown, not the Fields.

Related code: Added this to the Edit of Post. If you change TextField to TextInput it works as expected, but I want my own Field or CustomFields.

        <ArrayInput source="backlinks">
          <SimpleFormIterator disableRemove>
            <DateInput source="date" />
            <FormDataConsumer>
              {({ getSource, scopedFormData }) => {
                return (
                  <TextField source={getSource("id")} record={scopedFormData} />
                );
              }}
            </FormDataConsumer>
          </SimpleFormIterator>
        </ArrayInput>

Environment

• React-admin version: Current version of codesandbox simple.
• Last version that did not exhibit the issue (if applicable): 2 years ago it worked in another react admin I made.
• React version: Current version of codesandbox simple.
• Browser: Chrome
• Stack trace (in case of a JS error): When you click on add: client-hook-3.js:1 Warning: Each child in a list should have a unique "key" prop. Check the render method of SimpleFormIterator.

[djhi]

Thanks for reporting. Looks like a bug indeed.

[fzaninotto]

The documentation is wrong, you don't need to use getSource() in that case because the SimpleFormIterator already passes the right record. So the right syntax should be:

        <ArrayInput source="backlinks">
          <SimpleFormIterator disableRemove>
            <DateInput source="date" />
            <FormDataConsumer>
              {({ getSource, scopedFormData }) => <TextField source="id" record={scopedFormData} /> }}
            </FormDataConsumer>
          </SimpleFormIterator>
        </ArrayInput>

But if you do that, the FormDataConsumer logs a warning because you didn't use getSource... something is definitely wrong here.

[AnkitaGupta111]

@djhi ArrayInput with FormDataConsumer is rendering TextField .I don't think its a bug ,its just documentation is wrong as @fzaninotto mentioned in above comment. On using source="id" instead of source={getSource("id")} its working fine.

TextField is rendering and because record does not have any backlinks its source id value is undefined and not showing in ui

i tried adding backlinks while creating a new post and then clicked on edit that post ,now backlink id TextField value is showing

[WiXSL]

I don't think this is neither a bug not a documentation issue.

The problem is that the id field trying to be shown is not part of the backlinks records. It belongs to the form, so, of course, using getSource('id') won't help you; using source="id" will work, but with a warning, since the FormDataConsumer cares about the records being iterated when it is inside an ArrayInput IMHO, It is unusual to want to show the same form value repeated for every ArrayInput record, I'm not sure if it is a valid use case

[WiXSL]

This has been clarified in version 4.6 (#8445)

[fzaninotto]

With the release of react-admin v5, react-admin v3 has reached its end of life. We won't fix bugs or make any new release on the 3.x branch. We recommend that you switch to a more recent version of react-admin.

So I'm closing this issue as we won't fix it.