React-admin: Aside does not seem to have access to record.

[szi]

What you were expecting:
According to the documentation, I should be able to access the record's property within the <Aside> consctruct. However, it tells me that record is undefined.

In my case, I am using Aside within the Edit view.

Steps to reproduce:
My Aside sample code is pretty much just copied from the react-admin documentation:

const FilterQueryAside = ({ record }) => (
  <div style={{ width: 200, margin: '1em' }}>
       <Typography variant="title">Post details</Typography>
       <Typography variant="body1">
           Creation date: {record.id}
       </Typography>
   </div>
);

export const FilterQueryEdit = (props) => (
  <Edit aside={<FilterQueryAside />} title="Edit Filter Query" {...props}>
  <SimpleForm redirect="edit">
...

I get a "TypeError: Cannot read property 'id' of undefined"

Do I have to manually pass the record into the Aside?

Finally, would it be possible to use react-admin Fields within the aside? How could I achieve that?

Environment

• React-admin version: 2.4.1
• Last version that did not exhibit the issue (if applicable):
• React version:16.6.1
• Browser: Chrome V68
• Stack trace (in case of a JS error):

[szi]

Quick update on this: It happens only sometimes.

When I click on a post from the list view, it loads fine and shows the Aside. When I then click browser's refresh, I get the error of record being undefined. It seems like the Aside does not wait properly for the record to actually be loaded before being rendered.

Just confirmed the hypothesis: it does throw the "record is undefined" before any REST API query ever gets sent across the network, so there definitely is no record to even work with.

[fzaninotto]

No react-admin component waits for the record to be loaded to render - that's one of many optimizations that we do to display the UI quickly. It's the developper's job to make sure that the record is defined before using it.

[szi]

Ok, thanks.
I would suggest an update to the sample code in the documentation then, as the current version is not functional.

Is there a suggested way to use pre-existing react-admin components within Aside? Such as TextField etc? Would I need to wrap those in something?

[fzaninotto]

You're right, it's a documentation problem. Reopening and marking as bug.

As for your question, please use StackOverflow.