DataGrid does not show inside Tabs with filterValues

Question

I am trying to reproduce a component with Tabs and according filters like the OrderList in the react-admin demo (credentials are admin/password). The source can be found here.

What I have done is the following:

import React, { Fragment } from "react";
import {      
  List,
  TextField,
  Datagrid
} from "react-admin";
import Divider from "@material-ui/core/Divider";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";        

class TabbedDatagrid extends React.Component {
  tabs = [
    { id: 1, name: "in service" },
    { id: 2, name: "scrapped" },
    { id: 3, name: "locked" }
  ];

  state = { service: [], scrapped: [], locked: [] };  

  static getDerivedStateFromProps(props, state) {
    if (props.ids !== state[props.filterValues.conditionId]) {
      return { ...state, [props.filterValues.conditionId]: props.ids };
    }
    return null;
  }

  handleChange = (event, value) => {
    const { filterValues, setFilters } = this.props;
    setFilters({ ...filterValues, conditionId: value });
  };

  render() {
    const { classes, filterValues, ...props } = this.props;
    return (
      <Fragment>
        <Tabs
          variant="fullWidth"
          centered
          value={filterValues.conditionId}
          indicatorColor="primary"
          onChange={this.handleChange}
        >
          {this.tabs.map(choice => (
            <Tab key={choice.id} label={choice.name} value={choice.id} />
          ))}
        </Tabs>
        <Divider />
          <div>
            {filterValues.conditionId === 1 && (
              <Datagrid {...props} ids={this.state.service}>
                <TextField source="id" />                  
              </Datagrid>
            )}
            {filterValues.conditionId === 2 && (
              <Datagrid {...props} ids={this.state.scrapped}>
                <TextField source="id" />                  
              </Datagrid>
            )}
            {filterValues.conditionId === 3 && (
              <Datagrid {...props} ids={this.state.locked}>
                <TextField source="id" />                  
              </Datagrid>
            )}
          </div>
      </Fragment>
    );
  }
}

const RollList = ({ classes, ...props }) => (
  <List
    title="Roll Inventory"
    {...props}
    filterDefaultValues={{ conditionId: 1 }}
    sort={{ field: "name", order: "ASC" }}
    perPage={25}
  >
    <TabbedDatagrid />
  </List>
);

export default RollList;

When I run this code:

I see this

Data is not shown, although when I look at the props and the number of records in the right bottom corner I can see that data is there. The console doesn't show any error (besides missing translations).

I am using the following (relevant) dependencies:

"@material-ui/core": "^3.9.2",
"@material-ui/icons": "^3.0.2",
"ra-data-json-server": "^2.8.0",
"react": "^16.8.4",
"react-admin": "^2.8.1",
"react-dom": "^16.8.4",
"react-scripts": "^2.1.8"

Has anyone an idea what I can do about it?

Answer 1

I found a solution:

I saw that the only difference to the react-admin demo OrderList is that the id of the Tabs is a string whereas in my code it is an integer (like in my data provider).

I changed my code and also my data to be a string as an id instead of an integer.

tabs = [
  { id: 'service', name: 'in service' },
  { id: 'scrapped', name: 'scrapped' },
  { id: 'locked', name: 'locked' }
];

and also in the condition part further down

{filterValues.conditionId === 'service' && (
  <Datagrid {...props} ids={this.state.service}>
    {//...}
  </DataGrid>
)}

... not to forget the default value in the RollList wrapper at the end

filterDefaultValues={{ conditionId: 'service' }}

now it is working.

Thanks to all who thought about it.

Cheers.