<EditBase>

<EditBase> is a headless variant of <Edit>: it fetches a record based on the URL, prepares a form submit handler, and renders its children inside an EditContext. Use it to build a custom edition page layout.

Contrary to <Edit>, it does not render the page layout, so no title, no actions, and no <Card>.

<EditBase> relies on the useEditController hook.

Usage

Use <EditBase> to create a custom Edition view, with exactly the content you add as child and nothing else (no title, Card, or list of actions as in the <Edit> component).

import { EditBase, SelectInput, SimpleForm, TextInput, Title } from "react-admin";
import { Card, CardContent, Container } from "@mui/material";

export const BookEdit = () => (
    <EditBase>
        <Container>
            <Title title="Book Edition" />
            <Card>
                <CardContent>
                    <SimpleForm>
                        <TextInput source="title" />
                        <TextInput source="author" />
                        <SelectInput source="availability" choices={[
                            { id: "in_stock", name: "In stock" },
                            { id: "out_of_stock", name: "Out of stock" },
                            { id: "out_of_print", name: "Out of print" },
                        ]} />
                    </SimpleForm>
                </CardContent>
            </Card>
        </Container>
    </EditBase>
);

Props

You can customize the <EditBase> component using the following props, documented in the <Edit> component:

  • children: the components that renders the form
  • disableAuthentication: disable the authentication check
  • id: the id of the record to edit
  • mutationMode: switch to optimistic or pessimistic mutations (undoable by default)
  • mutationOptions: options for the dataProvider.update() call
  • queryOptions: options for the dataProvider.getOne() call
  • redirect: change the redirect location after successful creation
  • resource: override the name of the resource to create
  • transform: transform the form data before calling dataProvider.update()

Security

The <EditBase> component requires authentication and will redirect anonymous users to the login page. If you want to allow anonymous access, use the disableAuthentication prop.

If your authProvider implements Access Control, <EditBase> will only render if the user has the “edit” access to the related resource.

For instance, for the <PostEdit>page below:

import { EditBase, SimpleForm, TextInput } from 'react-admin';

// Resource name is "posts"
const PostEdit = () => (
    <EditBase>
        <SimpleForm>
            <TextInput source="title" />
            <TextInput source="author" />
            <TextInput source="published_at" />
        </SimpleForm>
    </EditBase>
);

<EditBase> will call authProvider.canAccess() using the following parameters:

{ action: "edit", resource: "posts" }

Users without access will be redirected to the Access Denied page.

Note: Access control is disabled when you use the disableAuthentication prop.