Back to Refine

Crud Live Preview

documentation/versioned_docs/version-3.xx.xx/api-reference/mantine/hooks/useSelect/crud-live-preview.md

3.25.01.1 KB
Original Source
tsx
setInitialRoutes(["/posts/create"]);
// visible-block-start
import { Create, Select, useForm, useSelect } from "@pankod/refine-mantine";

interface ICategory {
    id: number;
    title: string;
}

const ProductCreate: React.FC = () => {
    const { saveButtonProps, getInputProps, errors } = useForm({
        initialValues: {
            category: {
                id: "",
            },
        },
    });

    const { selectProps } = useSelect<ICategory>({
        resource: "categories",
    });

    return (
        <Create saveButtonProps={saveButtonProps}>
            <form>
                <Select
                    mt={8}
                    label="Category"
                    placeholder="Select a category"
                    {...getInputProps("category.id")}
                    {...selectProps}
                />
            </form>
        </Create>
    );
};
// visible-block-end
setRefineProps({
    resources: [
        {
            name: "posts",
            create: ProductCreate,
        },
    ],
});
render(<RefineMantineDemo />);