React-Admin：在列表中显示之前映射资源数据

Question

I want to perform additional operations on the returned elements from the API before showing them to the user. For example I have an enum field that is 0 or 1 and I would like to show some string instead of the raw value.

const List = (props: any) => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <TextField source="name" />
      <TextField source="type" />
      <TextField source="value" />
    </Datagrid>
  </List>
);

The type column is a 0 or a 1 and I would like to show a string to the user. How can I map the data fetched by the <List> component before it gets passed to my <DataGrid> ?

Answer 1

const YourChoices = [
    {id: 0, name: 'One'},
    {id: 1, name: 'Two'},
];

const YourTypeInput = (props) => {
    return (
        <SelectInput {...props} choices={YourChoices}/>
    );
};


const List = (props: any) => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <TextField source="name" />
      <TextField source="type" />
      <TextField source="value" />
      <YourTypeInput label="Type" source="xxxxxxx.yyyyyyyy"/>
    </Datagrid>
  </List>
);