4. Adding Create Page

Creating Create Page

First, we need to create our file, named create.tsx, under the src/pages/blog-posts folder. We will then copy the create page code generated by Inferencer and paste it into the file; for this, follow these steps:

Navigate to localhost:3000/blog-posts in your browser.
Click the "Create" button in the top right corner of the table to open the create page.
On the create page, click on the "Show Code" button in the bottom right corner of the page.
You can see the create page code generated by Inferencer. Copy it by clicking on the "Copy" button.
Paste the code into the newly created create.tsx file.

You can see an example create page generated by Inferencer below:

localhost:3000/blog-posts/create

Understanding the Create Component

Hooks and Components in Create Page

<Create/> is a refine component that is used for presentation purposes like showing the title of the page, save button etc.
For more information, refer to the <Create/> documentation→
The useForm hook is imported from @refinedev/react-hook-form, which combines the features of useForm hook from both React Hook Form and @refinedev/core. When used in the create page, it sends the form data to dataProvider's create method when the form is submitted. It also offers saveButtonProps for the form's submit button.
For more information, refer to the useForm andReact Hook Form documentation→
All other components provided by Chakra UI are used to display the form fields.
For more information, refer to the Chakra UI documentation→

Handling Relationships

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

For example, if we need to select a category from the categories resource to assign the blog post to the category, we can use the useSelect hook provided by refine. This hook fetches the data by passing the params to the dataProvider's getList method and then returns the options to be used in the <Select/> component.

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

const { options: categoryOptions } = useSelect({
    resource: "categories",
});

For more information, refer to the useSelect documentation and the Chakra UI <Select/> documentation→

Adding the Create Page to the App

Now that we have created the create page, we can add it to the App.tsx file:

Open src/App.tsx file on your editor.
Import the created BlogPostCreate component.
Replace the ChakraUIInferencer component with the BlogPostCreate component.

src/App.tsx

import { ChakraProvider } from "@chakra-ui/react";
import {
    ErrorComponent,
    ThemedLayoutV2,
    notificationProvider,
    RefineThemes,
} from "@refinedev/chakra-ui";
import { Refine } from "@refinedev/core";
import routerBindings, {
    NavigateToResource,
    UnsavedChangesNotifier,
} from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";

import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";

import { BlogPostEdit } from "pages/blog-posts/edit";
import { BlogPostList } from "pages/blog-posts/list";
import { BlogPostShow } from "pages/blog-posts/show";
import { BlogPostCreate } from "pages/blog-posts/create";

const App = () => {
    return (
        <ChakraProvider theme={RefineThemes.Blue}>
            <BrowserRouter>
                <Refine
                    notificationProvider={notificationProvider()}
                    routerProvider={routerBindings}
                    dataProvider={dataProvider(
                        "https://api.fake-rest.refine.dev",
                    )}
                    resources={[
                        {
                            name: "blog_posts",
                            list: "/blog-posts",
                            show: "/blog-posts/show/:id",
                            create: "/blog-posts/create",
                            edit: "/blog-posts/edit/:id",
                        },
                    ]}
                    options={{
                        syncWithLocation: true,
                        warnWhenUnsavedChanges: true,
                    }}
                >
                    <Routes>
                        <Route
                            element={
                                <ThemedLayoutV2>
                                    <Outlet />
                                </ThemedLayoutV2>
                            }
                        >
                            <Route
                                index
                                element={
                                    <NavigateToResource resource="blog_posts" />
                                }
                            />

                            <Route path="blog-posts">
                                <Route index element={<BlogPostList />} />
                                <Route
                                    path="show/:id"
                                    element={<BlogPostShow />}
                                />
                                <Route
                                    path="edit/:id"
                                    element={<BlogPostEdit />}
                                />
                                <Route
                                    path="create"
                                    element={<BlogPostCreate />}
                                />
                            </Route>

                            <Route path="*" element={<ErrorComponent />} />
                        </Route>
                    </Routes>

                    <UnsavedChangesNotifier />
                </Refine>
            </BrowserRouter>
        </ChakraProvider>
    );
};
export default App;

Now, we can see the create page in the browser at localhost:3000/blog-posts/create

Checklist

I have added the create page to the app.

I understood the create page components and hooks.

I understood the relationship handling.

Creating Create Page​

Understanding the Create Component​

Hooks and Components in Create Page​

Handling Relationships​

Adding the Create Page to the App​