`useEditContext`

Whenever react-admin displays an edition page, it creates an EditContext to store the record, the submit callback, and other data.

The EditContext is available to descendants of:

<Edit>,
<EditGuesser>,
<EditBase>,

All descendant components can therefore access the Edit context, using the useEditContext hook.

Usage

Use useEditContext in a component that is a descendant of an Edit component, e.g. to display a sidebar with info about the record:

import { Edit, useEditContext } from 'react-admin';
import { Typography } from '@mui/material';

export const PostEdit = () => (
    <Edit aside={<Aside />}>
        // ...
    </Edit>
);

const Aside = () => {
    const { record, isPending } = useEditContext();
    if (isPending) return null;
    return (
        <div>
            <Typography variant="h6">Posts stats</Typography>
            <Typography variant="body2">
                Last edition: {record.updated_at}
            </Typography>
        </div>
    );
};

Return Value

useEditContext returns an object with the same keys as useEditController:

const {
    defaultTitle, // Translated title based on the resource, e.g. 'Post #123'
    error, // Error returned by dataProvider when it failed to fetch the record. Useful if you want to adapt the view instead of just showing a notification using the onError side effect.
    isFetching, // Boolean, true while the record is being fetched, false once done fetching
    isPending, // Boolean, true until the record is available for the first time
    mutationMode, // Mutation mode argument passed as parameter, or 'undoable' if not defined
    record, // Either the record fetched via dataProvider.getOne() based on the id from the location, a cached version of the record (see also the Caching documentation page) or undefined
    redirect, // Default redirection route. Defaults to 'list'
    refetch, // Function that allows you to refetch the record 
    resource, // Resource name deduced from the location. e.g. 'posts'
    save, // Update callback to be passed to the underlying form as submit handler
    saving, // Boolean, true when dataProvider is called to update the record
} = useEditContext();

TypeScript

The useEditContext hook accepts a generic parameter for the record type:

import { Edit, useEditContext } from 'react-admin';
import { Typography } from '@mui/material';

type Post = {
    id: number;
    title: string;
    updated_at: Date;
};

export const PostEdit = () => (
    <Edit aside={<Aside />}>
        // ...
    </Edit>
);

const Aside = () => {
    const { record: post, isPending } = useEditContext<Post>();
    if (isPending) return null;
    return (
        <div>
            <Typography variant="h6">Posts stats</Typography>
            <Typography variant="body2">
                {/* TypeScript knows that post is of type Post */}
                Last edition: {post.updated_at}
            </Typography>
        </div>
    );
};