<RecordRepresentation>
Render the current record as text, leveraging the <Resource recordRepresentation>
prop.
You can also use its hook version: useGetRecordRepresentation
.
<RecordRepresentation>
doesn’t require any argument. It reads the current record from the parent RecordContext
and the current resource from the parent ResourceContext
.
The component uses the useGetRecordRepresentation
hook and the same rules are therefore applied.
// in src/posts/PostBreadcrumbs.tsximport * as React from 'react';import { Link } from 'react-router-dom';import { RecordRepresentation } from 'ra-core';
export const PostBreadcrumbs = () => { return ( <nav aria-label="breadcrumb"> <ol className="breadcrumb"> <li className="breadcrumb-item"> <Link to="/">Home</Link> </li> <li className="breadcrumb-item"> <Link to="/posts">Posts</Link> </li> <li className="breadcrumb-item active" aria-current="page"> <RecordRepresentation /> </li> </ol> </nav> );}
// in src/posts/PostEdit.tsximport { EditBase, Form } from 'ra-core';import { TextInput } from './TextInput';import { PostBreadcrumbs } from './PostBreadcrumbs';
const PostEdit = () => ( <EditBase> <PostBreadcrumbs /> <div> <Form> <TextInput source="title" /> </Form> </div> </EditBase>)
Here are all the props you can set on the <RecordRepresentation>
component:
Prop | Required | Type | Default | Description |
---|---|---|---|---|
record | Optional | RaRecord | Record from the parent RecordContext | The record to display |
resource | Optional | string | Resource from the parent ResourceContext | The record’s resource |
record
Section titled “record”The record to display. Defaults to the record from the parent RecordContext
.
<RecordRepresentation record={record} />
resource
Section titled “resource”The record’s resource. Defaults to the resource from the parent ResourceContext
.
<RecordRepresentation resource="posts" />