Add WithListContext component

[fzaninotto]

Problem

Reading data from a ListContext requires creating another component, as it's only available via a hook.

Solution

A render prop version of useListContext called WithListContext

import { List, Datagrid, TextField, ReferenceArrayField, WithListContext } from 'react-admin';
import { Chip, Stack } from '@mui/material';

const BookList = () => (
    <List>
        <Datagrid>
            <TextField source="id" />
            <TextField source="title" />
            <ReferenceArrayField label="Tags" reference="tags" source="tag_ids">
                <WithListContext render={({ isLoading, data }) => (
                    !isLoading && (
                        <Stack direction="row" spacing={1}>
                            {data.map(tag => (
                                <Chip key={tag.id} label={tag.name} />
                            ))}
                        </Stack>
                    )
                )} />
            </ReferenceArrayField>
        </Datagrid>
    </List>
);

This also facilitates the use of charts in react-admin:

import { ListBase, WithListContext } from 'react-admin';
import { LineChart, Line, XAxis, YAxis, CartesianGrid } from 'recharts';

const FruitChart = () => (
    <ListBase resource="fruits" disableSyncWithLocation perPage={100}>
        <WithListContext
            render={({ data }) => (
                <LineChart width={700} height={300} data={data}>
                    <XAxis dataKey="date" />
                    <YAxis />
                    <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
                    <Line dataKey="apples" type="monotone" stroke="#8884d8" />
                    <Line dataKey="blueberries" type="monotone" stroke="#82ca9d" />
                    <Line dataKey="carrots" type="monotone" stroke="#ffc658" />
                </LineChart>
            )}
        />
    </ListBase>
);

• Create the component
• Create a storybook
• Document it
• Add mentions of it in other parts of the documentation

[djhi]

Suggested change

	A function which will be called with the current [`ListContext`](./useListContext.md) as argument. It should return a React element.
	A function which will be called with the current [`ListContext`](./useListContext.md) as argument. It should return a React node.

[fzaninotto]

Nope, it's a React Element.

[djhi]

Suggested change

	- in descendants of the [`<List>`](./ListBase.md), [`<InfiniteList>`](./InfiniteList.md), and [`<ListBase>`](./ListBase.md) components
	- as a child of the [`<List>`](./ListBase.md), [`<InfiniteList>`](./InfiniteList.md), and [`<ListBase>`](./ListBase.md) components

[djhi]

I find the existing sentence confusing

[fzaninotto]

Your suggestion leads to another confusion: that the component would only work when used as child and not as grandchild.

I think that "descendants" is the right term.