Posts title doesn't work in the tutorial

[KulaGGin]

What you were expecting: Post title displayed as described in the tutorial.

What happened instead: No post title displayed after adding the described in the tutorial code.

Steps to reproduce: Add the described in the tutorial code.

Related code: In the Optimistic Rendering and Undo section in the tutorial it says to do to show the Post's title:

Code in the tutorial:

// in src/posts.js
+const PostTitle = ({ record }) => {
+    return <span>Post {record ? `"${record.title}"` : ''}</span>;
+};

export const PostEdit = props => (
-   <Edit {...props}>
+   <Edit title={<PostTitle />} {...props}>
        // ...
    </Edit>
);

My code:

const PostTitle = ({record}) => {
    return <span>Post {record ? `"${record.title}"` : ''}</span>;
};

export const PostEdit = props => (
    <Edit title={<PostTitle />} {...props}>
        <SimpleForm>
            <TextInput disabled source="id" />
            <ReferenceInput source="userId" reference="users">
                <SelectInput optionText="name" />
            </ReferenceInput>
            <TextInput source="title" />
            <TextInput multiline source="body" />
        </SimpleForm>
    </Edit>
);

I did that and the PostTitle doesn't appear:

I logged it and the record is undefined in PostTitle:

Here's the project with the issue at the state of the last screenshot above: React Project Example.zip

Environment

• React-admin version: react-admin@4.16.16
• React version: react@18.3.1
• Browser: Vivaldi

[fzaninotto]

Hi, and thanks for your feedback.

You're referring to the tutorial for react-admin v3.19, but your code uses react-admin v4. The correct link for the tutorial for react-admin v4 is https://marmelab.com/react-admin/Tutorial.html#customizing-the-page-title. You will see that the code for the PostTitle is different:

const PostTitle = () => {
  const record = useRecordContext();
  return <span>Post {record ? `"${record.title}"` : ''}</span>;
};