Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jun 21, 2021
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 16 additions & 13 deletions docs/Show.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 %}

Expand Down