Edit

Edit

The Edit component provides a container for editing existing records. It handles data fetching, form submission, validation, and success/error states.

Usage

import { Edit, SimpleForm, TextInput } from '@/components/admin';

export const PostEdit = () => (
  <Edit resource="posts">
    <SimpleForm>
      <TextInput source="title" required />
      <TextInput source="content" multiline />
      <SelectInput source="status" choices={['draft', 'published']} />
    </SimpleForm>
  </Edit>
);

Props

PropTypeDescription
resourcestringResource name for API calls
idstring | numberRecord ID (auto-detected from URL)
titlestringPage title override
childrenReactNodeForm content
redirectstring | falseRedirect path after successful update
mutationOptionsobjectCustom mutation options

Examples

Basic Edit Form

import { Edit, SimpleForm, TextInput, SelectInput } from '@/components/admin';

export const PostEdit = () => (
  <Edit resource="posts">
    <SimpleForm>
      <TextInput source="title" required />
      <TextInput source="content" multiline rows={5} />
      <SelectInput 
        source="status" 
        choices={[
          { id: 'draft', name: 'Draft' },
          { id: 'published', name: 'Published' }
        ]} 
      />
    </SimpleForm>
  </Edit>
);

With Custom Title

import { Edit, SimpleForm, TextInput } from '@/components/admin';

export const PostEdit = () => (
  <Edit resource="posts" title="Edit Blog Post">
    <SimpleForm>
      <TextInput source="title" />
      <TextInput source="content" multiline />
    </SimpleForm>
  </Edit>
);

With Custom Redirect

import { Edit, SimpleForm, TextInput } from '@/components/admin';

export const PostEdit = () => (
  <Edit resource="posts" redirect="/posts">
    <SimpleForm>
      <TextInput source="title" />
      <TextInput source="content" multiline />
    </SimpleForm>
  </Edit>
);

With Actions

import { Edit, SimpleForm, TextInput, DeleteButton } from '@/components/admin';

export const PostEdit = () => (
  <Edit 
    resource="posts"
    actions={
      <div className="flex gap-2">
        <DeleteButton />
        <Button variant="outline">Preview</Button>
      </div>
    }
  >
    <SimpleForm>
      <TextInput source="title" />
      <TextInput source="content" multiline />
    </SimpleForm>
  </Edit>
);

With Validation

import { Edit, SimpleForm, TextInput } from '@/components/admin';
import { z } from 'zod';

const schema = z.object({
  title: z.string().min(1, 'Title is required'),
  content: z.string().min(10, 'Content must be at least 10 characters'),
});

export const PostEdit = () => (
  <Edit resource="posts">
    <SimpleForm schema={schema}>
      <TextInput source="title" required />
      <TextInput source="content" multiline required />
    </SimpleForm>
  </Edit>
);
import { Edit, SimpleForm, TextInput, ReferenceInput, SelectInput } from '@/components/admin';

export const PostEdit = () => (
  <Edit resource="posts">
    <SimpleForm>
      <TextInput source="title" required />
      <TextInput source="content" multiline />
      <ReferenceInput source="author_id" reference="users">
        <SelectInput optionText="name" />
      </ReferenceInput>
      <ReferenceInput source="category_id" reference="categories">
        <SelectInput optionText="name" />
      </ReferenceInput>
    </SimpleForm>
  </Edit>
);

With Optimistic Updates

import { Edit, SimpleForm, TextInput } from '@/components/admin';

export const PostEdit = () => (
  <Edit 
    resource="posts"
    mutationOptions={{
      onMutate: (variables) => {
        // Optimistic update
        return { previousData: queryClient.getQueryData(['posts', variables.id]) };
      },
      onError: (err, variables, context) => {
        // Rollback on error
        queryClient.setQueryData(['posts', variables.id], context.previousData);
      },
    }}
  >
    <SimpleForm>
      <TextInput source="title" />
      <TextInput source="content" multiline />
    </SimpleForm>
  </Edit>
);

Data Loading

The Edit component automatically:

  • Fetches the record data using the ID from the URL
  • Provides loading states while fetching
  • Handles errors if the record is not found
  • Pre-fills form fields with existing data
// Data is automatically fetched and provided to form inputs
export const PostEdit = () => (
  <Edit resource="posts">
    <SimpleForm>
      {/* These inputs are automatically filled with existing data */}
      <TextInput source="title" />
      <TextInput source="content" />
    </SimpleForm>
  </Edit>
);

Form Submission

The Edit component handles form submission:

  • Updates the record via better-query
  • Shows loading states during submission
  • Displays success/error notifications
  • Handles redirects after successful updates

Error Handling

Automatic error handling for:

  • Network errors
  • Validation errors
  • Server errors
  • Not found errors
export const PostEdit = () => (
  <Edit resource="posts">
    <SimpleForm>
      <TextInput source="title" />
      {/* Field-level errors are shown automatically */}
      <TextInput source="email" type="email" />
    </SimpleForm>
  </Edit>
);

Installation

npx better-admin add edit
Edit on GitHub

On this page