Skip to content

Commit 1f52ce5

Browse files
committedDec 6, 2021
Add missing upgrade instruction
1 parent f5849e8 commit 1f52ce5

File tree

1 file changed

+45
-0
lines changed

1 file changed

+45
-0
lines changed
 

‎UPGRADE.md

+45
Original file line numberDiff line numberDiff line change
@@ -470,6 +470,51 @@ export const PostList = () => (
470470
);
471471
```
472472

473+
## `useListContext` No Longer Returns An `ids` Prop
474+
475+
The `ListContext` used to return two props for the list data: `data` and `ids`. To render the list data, you had to iterate over the `ids`.
476+
477+
Starting with react-admin v4, `useListContext` only returns a `data` prop, and it is now an array. This means you have to update all your code that relies on `ids` from a `ListContext`. Here is an example for a custom list iterator using cards:
478+
479+
```diff
480+
import * as React from 'react';
481+
import { useListContext, List, TextField, DateField, ReferenceField, EditButton } from 'react-admin';
482+
import { Card, CardActions, CardContent, CardHeader, Avatar } from '@material-ui/core';
483+
import PersonIcon from '@material-ui/icons/Person';
484+
485+
const CommentGrid = () => {
486+
- const { data, ids, loading } = useListContext();
487+
+ const { data, isLoading } = useListContext();
488+
- if (loading) return null;
489+
+ if (isLoading) return null;
490+
return (
491+
<div style={{ margin: '1em' }}>
492+
- {ids.map(id =>
493+
+ {data.map(record =>
494+
- <Card key={id} style={cardStyle}>
495+
+ <Card key={record.id} style={cardStyle}>
496+
<CardHeader
497+
- title={<TextField record={data[id]} source="author.name" />}
498+
+ title={<TextField record={record} source="author.name" />}
499+
- subheader={<DateField record={data[id]} source="created_at" />}
500+
+ subheader={<DateField record={record} source="created_at" />}
501+
avatar={<Avatar icon={<PersonIcon />} />}
502+
/>
503+
<CardContent>
504+
- <TextField record={data[id]} source="body" />
505+
+ <TextField record={record} source="body" />
506+
</CardContent>
507+
<CardActions style={{ textAlign: 'right' }}>
508+
- <EditButton resource="posts" record={data[id]} />
509+
+ <EditButton resource="posts" record={record} />
510+
</CardActions>
511+
</Card>
512+
)}
513+
</div>
514+
);
515+
};
516+
```
517+
473518
## `<Card>` Is Now Rendered By Inner Components
474519

475520
The page components (`<List>`, `<Show>`, etc.) used to render a `<Card>` around their child. It's now the responsibility of the child to render the `<Card>` itself. If you only use react-admin components, you don't need to change anything. But if you use custom layout components, you need to wrap them inside a `<Card>`.

0 commit comments

Comments
 (0)