Merge pull request #6376 from marmelab/fix-show-aside-component

[Doc] Fix `<Show aside>` prop format is component instead of element

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 %}