-
-
Notifications
You must be signed in to change notification settings - Fork 5.3k
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.
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
Conversation
@@ -150,18 +150,20 @@ 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: |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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>
There was a problem hiding this comment.
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.
@@ -150,18 +150,20 @@ 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: |
There was a problem hiding this comment.
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.
docs/SimpleFormIterator.md
Outdated
record={scopedFormData} | ||
/> | ||
<Labeled label="Url"> | ||
<TextField source={getSource('url')} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is wrong, this will show the data from the record, not the form.
If it doesn't work with scopedFormData, it may be because the usewatch() in FormDataConsumer doesn't return data before changes. This is what we must fix, not the docs.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Might be linked to #8340
SimpleFormIterator
exampleSimpleFormIterator
example of using Field
instead of Input
components
SimpleFormIterator
example of using Field
instead of Input
componentsField
components inside a SimpleFormIterator
No description provided.