eastern-cyan•2mo ago

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

kapa.ai•2mo ago

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:

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>({
    refineCoreProps: {
      action: "edit",
      resource: "apps",
      id: id, // Set the id here
    },
    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>
  );
};

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>({
    refineCoreProps: {
      action: "edit",
      resource: "apps",
      id: id, // Set the id here
    },
    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>
  );
};

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: ----------------------

kapa.ai•2mo ago

<@480113761881948183> kapa.ai is still learning and improving, please let us know how it did by reacting below