CODEWITHSUNDEEP
javascriptreactjsreact-admin
AdamSulc
AdamSulc

Reputation: 450

Give List component specific data to display

I am using react-admin framework (3.2). I have an object that stores entities that are filtered by expiration. I would like to display these entities in List. So far I have tried to create fake props to replicate the List component.

let fakeProps = {
            basePath: basePath,
            hasCreate: false,
            hasEdit: false,
            hasList: true,
            hasShow: false,
            history: {},
            location: { pathname: "/", search: "", hash: "", state: undefined },
            match: { path: "/", url: "/", isExact: true, params: {} },
            options: {},
            permissions: null,
            resource: resource,
            perPage: 30,
            actions: null,
            data: this.state.filteredList
        }

And then I return my list with props:

<List {...fakeProps}>
   <Datagrid>
      <TextField source='_id' />
   </Datagrid>
</List>

But I am only getting every entity. I need to display entities that are stored in this.state.filteredList.

Any ideas how can I do this? Thank you in advance.

Upvotes: 0

Views: 106

Answers (2)

Adam Šulc
Adam Šulc

Reputation: 546

If you want to replicate the UI of List component use ListController and ListView.

<ListController {...fakeProps}>
  {({ data, ...controllerProps }) =>
    return <ListView data={yourData} {...fakeProps} {...controllerProps}>
    
    </ListView>
  }
</ListController>

It is also possible that you will have to transform the format of data that you are putting into the ListView using reduce.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Also you might have to give ListView more custom props, just check the errors in console.

Upvotes: 1

MwamiTovi
MwamiTovi

Reputation: 2502

In this scenario, it's key to note this explanation from react-admin

The List view displays a list of records fetched from the API.
The entry point for this view is the <List> component, which takes care of fetching the data.
Then, it passes the data to an iterator view - usually <Datagrid>, which then delegates the rendering of each record property to components.

Therefore, filtering is made at the <List> as you've done.
But the list has special props to support you in that.

To set default values to filters, you can pass an object literal as the filterDefaultValues prop of the <List> element.

<List
  {...props}
  // entities that are filtered by expiration
  filterDefaultValues={{ is_expired: true }}
>
  <StyledTabbedDatagrid />
</List>

Upvotes: 0

Related Questions