From 7654b07e87d8b9e567d53f4dd151aabc5c66461b Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Mon, 21 Jun 2021 13:53:48 +0200
Subject: [PATCH] [Doc] Fix `<Show aside>` prop format is component instead of
 element

Closes #6372
---
 docs/Show.md | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/docs/Show.md b/docs/Show.md
index d9059b0cd62..cf50515ad1e 100644
--- a/docs/Show.md
+++ b/docs/Show.md
@@ -127,7 +127,7 @@ export const PostShow = (props) => (
 
 ![Aside component](./img/aside.png)
 
-You may want to display additional information on the side of the resource detail. Use the `aside` prop for that, passing the component of your choice:
+You may want to display additional information on the side of the resource detail. Use the `aside` prop for that, passing the element of your choice:
 
 {% raw %}
 ```jsx
@@ -141,27 +141,30 @@ const Aside = () => (
 );
 
 const PostShow = props => (
-    <Show aside={Aside} {...props}>
+    <Show aside={<Aside />} {...props}>
         ...
     </Show>
 );
 ```
 {% endraw %}
 
-The `aside` component receives the same props as the `Show` child component: `basePath`, `record`, `resource`, and `version`. That means you can display secondary details of the current record in the aside component:
+You can use the `useRecordContext` hook to display non-editable details about the current record in the aside component: 
 
 {% raw %}
 ```jsx
-const Aside = ({ record }) => (
-    <div style={{ width: 200, margin: '1em' }}>
-        <Typography variant="h6">Post details</Typography>
-        {record && (
-            <Typography variant="body2">
-                Creation date: {record.createdAt}
-            </Typography>
-        )}
-    </div>
-);
+const Aside = () => {
+    const record = useRecordContext();
+    return (
+        <div style={{ width: 200, margin: '1em' }}>
+            <Typography variant="h6">Post details</Typography>
+            {record && (
+                <Typography variant="body2">
+                    Creation date: {record.createdAt}
+                </Typography>
+            )}
+        </div>
+    );
+}
 ```
 {% endraw %}