Get a function that returns the record representation, leveraging the <Record recordRepresentation> prop.

You can also use the component version: <RecordRepresentation>.


// in src/posts/PostBreadcrumbs.tsx
import * as React from 'react';
import { Breadcrumbs, Typography } from '@mui/material';
import { Link, useGetRecordRepresentation, useRecordContext } from 'react-admin';

export const PostBreadcrumbs = () => {
    const record = useRecordContext();
    const getRecordRepresentation = useGetRecordRepresentation('posts');
    return (
        <div role="presentation">
            <Breadcrumbs aria-label="breadcrumb">
                <Link underline="hover" color="inherit" to="/">
                <Link underline="hover" color="inherit" to="/posts">
                <Typography color="text.primary">

// in src/posts/PostEdit.tsx
import { EditBase, EditView, SimpleForm, TextInput } from 'react-admin';
import { PostBreadcrumbs } from './PostBreadcrumbs';

const PostEdit = () => (
        <PostBreadcrumbs />
                <TextInput source="title" />

Default Representation

When <Resource recordRepresentation> is not defined, useGetRecordRepresentation will return the first non-empty field from this list:

  1. name
  2. title
  3. label
  4. reference
  5. id


Here are all the options you can set on the useGetRecordRepresentation hook:

Prop Required Type Default Description
resource Required string   The record’s resource


The record’s resource.