Edit Entity

The Edit Entity page pre-populates a form with an existing entity’s data and PATCHes the API on submit.

Import


import { EditEntity } from "@phpcreation/frontend-crud-react-nextjs-bundle/components/EditEntity";

How It Works

Entity data is fetched from the API using the entity ID from the route params
useInitialFormValues maps API response to form values
RenderFormFields renders the pre-populated form
On submit, getUpdatedFormFields computes the diff (only changed fields are sent)
PATCH request is made with the diff payload
On success, redirects to the detail page

Usage


// app/[locale]/entities/[id]/edit/page.tsx (generated)
import { EditEntity } from "...";
import { entityConfig, entityFormFields, entitySchema } from "../../entity.config";
 
export default function EditEntityPage({ params }) {
  return (
    <EditEntity
      id={params.id}
      entityConfig={entityConfig}
      formFields={entityFormFields}
      schema={entitySchema}
    />
  );
}

Props

Prop	Type	Description
`id`	`string \| number`	Entity ID to edit
`entityConfig`	`EntityConfig`	Entity configuration
`formFields`	`FieldConfig[]`	Fields to render
`schema`	`ZodSchema`	Validation schema
`onSuccess`	`(entity: Entity) => void`	Optional success callback

Diff Submission

Only changed fields are sent in the PATCH payload, computed by getUpdatedFormFields:


// Only sends changed fields
const payload = getUpdatedFormFields(initialValues, currentValues);
// { name: "New Name" } — only the changed field

For custom properties, the customProperties object is renamed to customData in the PATCH payload. See Custom Properties.