---
id: add-edit-page
title: 2. Adding Edit Page
tutorial:
  order: 0
  prev: 3.xx.xx/tutorial/adding-crud-pages/{preferredUI}/index
  next: 3.xx.xx/tutorial/adding-crud-pages/{preferredUI}/add-show-page
---

Edit page is the page where you can edit the record. In this tutorial, we will create the edit page for the `blog_posts` resource.

## Creating Edit Page

First, let's create our file under the `src/pages/blog-posts` folder. We will name it `edit.tsx`. Then, we will copy the edit page code generated by Inferencer and paste it into the file.

To copy the code and paste it into the file, follow the steps below:

1. Navigate to the <a href="http://localhost:3000/blog-posts" rel="noopener noreferrer nofollow">localhost:3000/blog-posts</a> in your browser.

2. To open the edit page, click any "Edit" button in the "Actions" column of the table.

3. On the edit page, click on the "Show Code" button in the bottom right corner of the page.

4. You can see the edit page code generated by Inferencer. Click on the "Copy" button to copy the code.

5. Paste the code into the you created, `edit.tsx` file.

You can see the edit page code generated by Inferencer below:

```tsx live previewOnly previewHeight=600px url=http://localhost:3000/blog-posts/edit/123
setInitialRoutes(["/blog-posts/edit/123"]);

import { Refine } from "@pankod/refine-core";
import {
  Layout,
  ReadyPage,
  useNotificationProvider,
  ErrorComponent,
} from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import { AntdInferencer } from "@pankod/refine-inferencer/antd";

import "@pankod/refine-antd/dist/reset.css";

const App: React.FC = () => {
  return (
    <Refine
      routerProvider={routerProvider}
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
      Layout={Layout}
      ReadyPage={ReadyPage}
      notificationProvider={useNotificationProvider}
      catchAll={<ErrorComponent />}
      resources={[
        {
          name: "blog_posts",
          list: AntdInferencer,
          show: AntdInferencer,
          create: AntdInferencer,
          edit: AntdInferencer,
        },
      ]}
    />
  );
};

render(<App />);
```

Instead of coding the edit page component from scratch, Inferencer created the required code base on API response, so that we can customize.

## Understanding the Edit Component

We will go through the edit page components and hooks one by one.

- `<Edit/>` is a **refine** component that is used to presentation purposes like showing the title of the page, save button, refresh button etc.

  [Refer to the `<Edit/>` documentation for more information &#8594](/docs/3.xx.xx/api-reference/antd/components/basic-views/edit)

- `<Form/>` and `<Form.Item/>` are **Ant Design** components that are used to build the form.

  [Refer to the **Ant Design** `<Form/>` documentation for more information &#8594](https://ant.design/components/form/)

- `useForm` is a **refine** hook that provides the necessary props for the form. It also provides the `saveButtonProps` prop that we can pass to the submit button of the form.

  When you use `useForm` in the edit page, it automatically fetches the data of the record by using the `id` in the URL, then fills the form with the data. It sends the form data to `dataProvider`'s `update` method when the form is submitted.

  [Refer to the `useForm` documentation for more information &#8594](/docs/3.xx.xx/api-reference/antd/hooks/form/useForm/)

### Handling Relationships

In the edit page, we may need to select a record from another resource.

For example, we may need to select a category from the `categories` resource to assign the blog post to the category. In this case, we can use the `useSelect` hook provided by **refine**. This hook fetches the data by passing the params to the `dataProvider`'s `getList` method. Then, it returns the necessary props for the `<Select/>` component.

[Refer to the `useSelect` documentation for more information &#8594](/docs/3.xx.xx/api-reference/antd/hooks/field/useSelect/)

[Refer to the **Ant Design** `<Select/>` documentation for more information &#8594](https://ant.design/components/select)

In the auto-generated edit page code, Inferencer used the `useSelect` hook to select a category from the `categories` resource like below:

```tsx
const { selectProps: categorySelectProps } = useSelect({
  resource: "categories",
});
```

`useSelect` returns 10 record by default, but the category of the blog post may not be in the first 10 records. To solve this problem, we can use the `defaultValue` prop to set the default value of the select component like below:

```tsx
const { selectProps: categorySelectProps } = useSelect({
  resource: "categories",
  defaultValue: blogPostsData?.category?.id,
});
```

## Adding the Edit Page to the App

Now that we have created the edit page, we need to add it to the `App.tsx` file.

1. Open `src/App.tsx` file on your editor.

2. Import the created `BlogPostEdit` component.

3. Replace the `AntdInferencer` component with the `BlogPostEdit` component.

```tsx title="src/App.tsx"
import { Refine } from "@pankod/refine-core";
import {
  Layout,
  ReadyPage,
  useNotificationProvider,
  ErrorComponent,
} from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import { AntdInferencer } from "@pankod/refine-inferencer/antd";

import { BlogPostList } from "pages/blog-posts/list";
//highlight-next-line
import { BlogPostEdit } from "pages/blog-posts/edit";

import "@pankod/refine-antd/dist/reset.css";

const App: React.FC = () => {
  return (
    <Refine
      routerProvider={routerProvider}
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
      Layout={Layout}
      ReadyPage={ReadyPage}
      notificationProvider={useNotificationProvider}
      catchAll={<ErrorComponent />}
      resources={[
        {
          name: "blog_posts",
          list: BlogPostList,
          //highlight-next-line
          edit: BlogPostEdit,
          show: AntdInferencer,
          create: AntdInferencer,
        },
      ]}
    />
  );
};
export default App;
```

Now, we can see the edit page in the browser at <a href="http://localhost:3000/blog-posts/edit/123" rel="noopener noreferrer nofollow">localhost:3000/blog-posts/edit/123</a>

<br/>
<br/>

<Checklist>

<ChecklistItem id="add-edit-page-antd">
I added the edit page to the app.
</ChecklistItem>
<ChecklistItem id="add-edit-page-antd-2">
I understood the edit page components and hooks.
</ChecklistItem>
<ChecklistItem id="add-edit-page-antd-3">
I understood the relationship handling.
</ChecklistItem>

</Checklist>
