From e2ae61eb077d10da80406249e96046e2d5abab4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?An=C3=ADbal=20Svarcas?= <WiXSL@users.noreply.github.com>
Date: Thu, 10 Mar 2022 08:45:44 -0300
Subject: [PATCH] Fix Datagrid example

---
 docs/List.md | 45 +++++++++++++++++++++++++--------------------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/docs/List.md b/docs/List.md
index a2dbe10b41b..2b2e37f76c6 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -2962,19 +2962,20 @@ You can use the `<Datagrid>` component with [custom queries](./Actions.md#useque
 {% raw %}
 ```jsx
 import keyBy from 'lodash/keyBy';
-import { Fragment } from 'react';
+import { useState } from 'react';
 import {
     useQuery,
     Datagrid,
     TextField,
     Pagination,
     Loading,
+    ListContextProvider,
 } from 'react-admin';
 
 const CustomList = () => {
     const [page, setPage] = useState(1);
     const [perPage, setPerPage] = useState(25);
-    const [sort, setSort] = useState({ field: 'id', order: 'ASC' })
+    const [sort, setSort] = useState({ field: 'id', order: 'ASC' });
     const { data, total, loading, error } = useQuery({
         type: 'getList',
         resource: 'posts',
@@ -2982,34 +2983,38 @@ const CustomList = () => {
             pagination: { page, perPage },
             sort,
             filter: {},
-        }
+        },
     });
 
     if (loading) {
-        return <Loading />
+        return <Loading />;
     }
     if (error) {
-        return <p>ERROR: {error}</p>
+        return <p>ERROR: {error}</p>;
     }
     return (
-        <Fragment>
-            <Datagrid 
-                data={keyBy(data, 'id')}
-                ids={data.map(({ id }) => id)}
-                currentSort={sort}
-                setSort={(field, order) => setSort({ field, order })}
-            >
+        <ListContextProvider
+            value={{
+                data: keyBy(data, 'id'),
+                ids: data.map(({ id }) => id),
+                total,
+                page,
+                perPage,
+                setPage,
+                setPerPage,
+                currentSort: sort,
+                setSort: (field, order) => setSort({ field, order }),
+                basePath: '/posts',
+                resource: 'posts',
+                selectedIds: [],
+            }}
+        >
+            <Datagrid>
                 <TextField source="id" />
                 <TextField source="title" />
             </Datagrid>
-            <Pagination
-                page={page}
-                setPage={setPage}
-                perPage={perPage}
-                setPerPage={setPerPage}
-                total={total}
-            />
-        </Fragment>
+            <Pagination />
+        </ListContextProvider>
     );
 }
 ```