Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Doc] Improve example of using Field components inside a SimpleFormIterator #8359

Merged
merged 5 commits into from
Nov 22, 2022
Merged

[Doc] Improve example of using Field components inside a SimpleFormIterator #8359

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6e1f4a1
Improve SimpleFormIterator example
Nov 4, 2022
2105211
Fix example
WiXSL Nov 8, 2022
352d2f9
Rollback to correct example
WiXSL Nov 22, 2022
2d20e4d
Fix example
WiXSL Nov 22, 2022
92d007c
Fix example again
WiXSL Nov 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 8 additions & 11 deletions docs/SimpleFormIterator.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,20 +150,17 @@ const PostEdit = () => (
**Note**: `<SimpleFormIterator>` only accepts `Input` components as children. If you want to use some `Fields` instead, you have to use a `<FormDataConsumer>` to get the correct source, as follows:
Copy link
Contributor Author

@WiXSL WiXSL Nov 4, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is actually incorrect, it accepts fields components as children, but without a label, once you add the Labeled component you need the FormDataConsumer.

I don't know if I should rephrase this or just leave it like this

Copy link
Member

@fzaninotto fzaninotto Nov 7, 2022 •
edited by WiXSL
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, it depends: you can use Label+Fields directly to display the record value, but if you want to render a reactive value based on the form inputs, you have to use the FormDataConsumer.

I think this should be clarified in the doc.

Copy link
Contributor Author

@WiXSL WiXSL Nov 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, actually, you cannot use a Labeled + Field inside a SimpleFormIterator.
The SimpleFormIterator passes the correct source prop to each direct children, and the Labeled doesn't pass props to its children.

This is how it goes inside a SimpleFormIterator:

<ArrayInput source="authors">
    <SimpleFormIterator>
        <TextField source="role" />        // => Value is shown , no label
        <Labeled label="Role">              // => Label is shown , no value
            <TextField source="role" />
        </Labeled>
        <FormDataConsumer>               // => Label + value are shown
            {({ getSource }) => {
                return (
                    <Labeled label="Role">
                        <TextField source={getSource('role')} />
                    </Labeled>
                );
            }}
        </FormDataConsumer>
        <FormDataConsumer>                   // => Label is shown, no value
            {({ getSource, scopedFormData }) => {
                return (
                    <Labeled label="Role">
                        <TextField
                            source={getSource('role')}
                            record={scopedFormData}
                        />
                    </Labeled>
                );
            }}
        </FormDataConsumer>
    </SimpleFormIterator>
</ArrayInput>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The last example should work. If it doesn't we should fix the bug.


```jsx
import { ArrayInput, SimpleFormIterator, DateInput, TextInput, FormDataConsumer } from 'react-admin';
import { ArrayInput, SimpleFormIterator, DateInput, TextField, FormDataConsumer, Labeled } from 'react-admin';

<ArrayInput source="backlinks">
<SimpleFormIterator disableRemove >
<SimpleFormIterator disableRemove>
<DateInput source="date" />
<FormDataConsumer>
{({ getSource, scopedFormData }) => {
return (
<TextField
source={getSource('url')}
record={scopedFormData}
/>
);
}}
{({ getSource }) => (
<Labeled label="Url">
<TextField source={getSource('url')} />
</Labeled>
)}
</FormDataConsumer>
</SimpleFormIterator>
</ArrayInput>
Expand Down Expand Up @@ -350,4 +347,4 @@ This property accepts the following subclasses:
| `RaSimpleFormIterator-index` | Applied to the row label when `getItemLabel` is set |
| `RaSimpleFormIterator-inline` | Applied to rows when `inline` is true |
| `RaSimpleFormIterator-line` | Applied to each row |
| `RaSimpleFormIterator-list` | Applied to the `<ul>` element |
| `RaSimpleFormIterator-list` | Applied to the `<ul>` element |