Custom Edit Page not finding id
Trying to use this format to recognise the resource and id to edit
<Edit resource='apps' recordItemId={id}
Not working. URL with id
http://localhost:5173/apps/builder/edit/9346e949-de1e-408f-b6a0-0c90c1f7d30f/core
Full code
import React from 'react';
import { Edit, useForm, useSelect } from "@refinedev/mantine";
import { Select, TextInput } from "@mantine/core";
import { IApp} from '../../../interfaces';
import { useLocation } from 'react-router-dom';
export const AppEdit: React.FC = () => {
const location = useLocation();
const id = location.pathname.split('/')[4];
console.log(id);
const {
saveButtonProps,
getInputProps,
refineCore: { queryResult },
} = useForm<IApp>({
initialValues: {
name: "",
status: 5,
},
validate: {
name: (value) => (value.length < 2 ? "Too short title" : null),
status: (value) => (value.length <= 0 ? "Status is required" : null),
},
});
const appData = queryResult?.data?.data;
return (
<Edit resource='apps' recordItemId={id} saveButtonProps={saveButtonProps}>
<form>
<TextInput
mt={8}
label="Name"
placeholder="Name"
{...getInputProps("name")}
/>
<Select
mt={8}
label="Status"
placeholder="Pick one"
{...getInputProps("status")}
data={[
{ label: "Published", value: "published" },
{ label: "Draft", value: "draft" },
{ label: "Rejected", value: "rejected" },
]}
/>
</form>
</Edit>
);
};
2 Replies
Hi @Matt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To address the issue of the custom edit page not recognizing the
id
, you can use the recordItemId
property correctly. Based on the knowledge sources, the recordItemId
property is used when the <Edit>
component cannot read the id
from the URL, such as when it is used on a custom page, modal, or drawer.
Here is the corrected version of your code:
In this code, the id
is set in the useForm
hook using the refineCoreProps
property. This ensures that the id
is correctly recognized for the edit action.
For more details, you can refer to the documentation on the useForm
hook and the Edit
component:
- useForm Hook Documentation (https://refine.dev/docs/ui-integrations/mantine/hooks/use-form#id)
- Edit Component Documentation (https://refine.dev/docs/ui-integrations/mantine/components/basic-views/edit#recorditemid)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@480113761881948183> kapa.ai is still learning and improving, please let us know how it did by reacting below