Skip to main content
Version: 3.xx.xx

2. Adding Edit Page

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

Creating Edit Page

First, let's create our file under the src/pages/products 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 localhost:3000/products 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:

http://localhost:3000/products/edit/123

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.

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 product to the category. In this case, we can use the useAutocomplete 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 <Autocomplete/> component.

Refer to the useAutocomplete documentation for more information

Refer to the Material UI <Autocomplete/> documentation for more information

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

const { autocompleteProps: categoryAutocompleteProps } = useAutocomplete({
resource: "categories",
});

useAutocomplete returns 10 record by default, but the category of the product 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 useAutocomplete hook like below:

const { autocompleteProps: categoryAutocompleteProps } = useAutocomplete({
resource: "categories",
defaultValue: productsData?.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 ProductEdit component.

  3. Replace the MuiInferencer component with the ProductEdit component.

src/App.tsx
import { Refine } from "@pankod/refine-core";
import {
Layout,
ReadyPage,
ErrorComponent,
LightTheme,
CssBaseline,
GlobalStyles,
ThemeProvider,
RefineSnackbarProvider,
notificationProvider,
} from "@pankod/refine-mui";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import { MuiInferencer } from "@pankod/refine-inferencer/mui";

import { ProductList } from "pages/products/list";
import { ProductEdit } from "pages/products/edit";

const App: React.FC = () => {
return (
<ThemeProvider theme={LightTheme}>
<CssBaseline />
<GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
<RefineSnackbarProvider>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(
"https://api.fake-rest.refine.dev",
)}
notificationProvider={notificationProvider}
Layout={Layout}
ReadyPage={ReadyPage}
catchAll={<ErrorComponent />}
resources={[
{
name: "products",
list: ProductList,
edit: ProductEdit,
show: MuiInferencer,
create: MuiInferencer,
},
]}
/>
</RefineSnackbarProvider>
</ThemeProvider>
);
};
export default App;

Now, we can see the edit page in the browser at localhost:3000/products/edit/123



Checklist