question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ReferenceArrayField is not passing data to child DataGrid or EditableDataGrid

See original GitHub issue

What you were expecting: To have data fetched from ReferenceArrayField passed to the child EditableDataGrid

I am trying to display a datagrid of media of a product from a list of media ids. Using ReferenceArrayField component, the getMany() function of the media data provider is called. The fetching is working fine.

What happened instead: The data fetched is not passed by the ReferenceArrayField component to its child EditableDataGrid. I really don’t get what is happening here, might be a bug.

Steps to reproduce: The resource mediaResource is created, the ids mediasIds are passed to the ReferenceArrayField, the data is fetched. All the fetching works perfectly fine, but the ReferenceArrayField is not passing the fetched data to its child.

The component:

function MediasList(): JSX.Element {
    return (
        <ReferenceArrayField fullWidth label="Médias" reference="mediaResource" source="mediasIds">
            <EditableDatagrid
                undoable
                createForm={<MediasForm children={undefined} />}
                editForm={<MediasForm children={undefined} />}
                rowClick="edit"
                hasCreate
            >
                <UrlField source="finalUrl" label="Miniature" target="_blank" />
                <TextField source="id" />
            </EditableDatagrid>
        </ReferenceArrayField>
    );
}

The edit page where the component is implemented:

<Edit {...props}>
            <SimpleForm>
                // Some irrelevant code here
                <MediasList />
            </SimpleForm>
        </Edit>

Related code: The ReferenceArrayField doc: https://marmelab.com/react-admin/ReferenceArrayField.html

The EditableDataGrid doc: https://marmelab.com/ra-enterprise/modules/ra-editable-datagrid

Environment

React-admin version: 3.19.7 React version: 17.0.2 React Admin EditableDataGrid version: 2.2.0 Browser: Chrome

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
gautiermarechalcommented, Apr 14, 2022

@WiXSL Actually the error is occuring even with DataGrid which is an open source component.

0reactions
slax57commented, Apr 19, 2022

Customer has confirmed the problem has been figured out. (internal tracker issues 563 and 565) Closing issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Admin: ReferenceArrayField is not passing data to child
I am trying to display a datagrid of media of a product from a list of media ids. Using ReferenceArrayField component, the getMany() ......
Read more >
The ReferenceArrayField Component - React-admin - Marmelab
You can change how the list of related records is rendered by passing a custom child reading the ListContext (e.g. a <Datagrid> )....
Read more >
react-admin/Datagrid.md at master - GitHub
It inspects each child's source and/or label props to determine the name of the column. What's a Field component? Simply a component that...
Read more >
Real-time Editable Datagrid In React - DEV Community ‍ ‍
A datagrid enables you to display and edit data. This is vital in many data-driven or line of business applications. I've used it...
Read more >
React Data Grid: Tree Data - AG Grid
This is because groups in tree data are rows passed by the application that may or may not have children - a group...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found