Within a basic RA application, I am attempting to showcase an item known as a "card" utilizing a Show Page. The fields—specifically id and title—are being presented correctly.
Nevertheless, the useRecordContext() hook is consistently returning undefined (similarly, useShowContext() and useShowController() were experimented with, as shown in the code below)—although I'm unable to determine the reason behind this issue.
The code within the ShowPage is outlined as follows:
// ./cards/CardShow.tsx
import { useParams } from 'react-router-dom';
import { useRecordContext, useShowContext, useShowController } from 'react-admin';
import { Show, SimpleShowLayout, TextField } from 'react-admin';
const CardShow = () => {
const { id } = useParams();
console.log(id); // OK: displays the id
const record = useRecordContext();
console.log(record); // ERROR: undefined
const {isLoading, record:record2} = useShowContext();
if(isLoading) {return null}
console.log(record2); // ERROR: null
const { data } = useShowController();
console.log(data); // ERROR: undefined
return (
<Show>
<SimpleShowLayout>
{/* Displays correct data which
proves somehow the record is fetched */}
<TextField source="id" />
<TextField source="title" />
</SimpleShowLayout>
</Show>
)
};
export default CardShow;
I have a suspicion that I might be overlooking something quite straightforward, yet pinpointing it has eluded me thus far... Any suggestions?
Your help is greatly appreciated!