provincial-silver•7mo ago

Error with using a custom db select

import React from 'react'; import { Edit, useForm, useSelect } from "@refinedev/mantine"; import { Select, TextInput } from "@mantine/core"; import { IApp, ICategory } from '../../../interfaces'; 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, }, }); const appData = queryResult?.data?.data; const { selectProps } = useSelect<ICategory>({ resource: "options", filters: [ { field: "parent_id", operator: "eq", value: 1, }, ], defaultValue: appData?.categoryID, }); return ( <Edit saveButtonProps={saveButtonProps}> <form> <Select mt={8} label="Category" placeholder="Pick one" {...getInputProps("categoryID")} {...selectProps} /> </form> </Edit> ); };

4 Replies

kapa.ai•7mo 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: ---------------------- Based on the provided code and the knowledge sources, it looks like you are trying to use the useSelect hook to populate a Select component with options from a custom database. Here is a refined version of your code, ensuring that it aligns with the examples and best practices from the knowledge sources. Code Example

import React from 'react';
import { Edit, useForm, useSelect } from "@refinedev/mantine";
import { Select, TextInput } from "@mantine/core";
import { IApp, ICategory } 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,
        },
    });

    const appData = queryResult?.data?.data;
    const { selectProps } = useSelect<ICategory>({
        resource: "options",
        filters: [
            {
                field: "parent_id",
                operator: "eq",
                value: 1,
            },
        ],
        defaultValue: appData?.categoryID,
    });

    return (
        <Edit saveButtonProps={saveButtonProps}>
            <form>
                <Select
                    mt={8}
                    label="Category"
                    placeholder="Pick one"
                    {...getInputProps("categoryID")}
                    {...selectProps}
                />
            </form>
        </Edit>
    );
};

import React from 'react';
import { Edit, useForm, useSelect } from "@refinedev/mantine";
import { Select, TextInput } from "@mantine/core";
import { IApp, ICategory } 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,
        },
    });

    const appData = queryResult?.data?.data;
    const { selectProps } = useSelect<ICategory>({
        resource: "options",
        filters: [
            {
                field: "parent_id",
                operator: "eq",
                value: 1,
            },
        ],
        defaultValue: appData?.categoryID,
    });

    return (
        <Edit saveButtonProps={saveButtonProps}>
            <form>
                <Select
                    mt={8}
                    label="Category"
                    placeholder="Pick one"
                    {...getInputProps("categoryID")}
                    {...selectProps}
                />
            </form>
        </Edit>
    );
};

Explanation 1. Imports: Ensure you have all necessary imports, including useLocation from react-router-dom. 2. useForm Hook: The useForm hook is used to manage form state and handle form submission. It is configured with refineCoreProps to specify the action, resource, and id. 3. useSelect Hook: The useSelect hook is used to fetch options for the Select component. It is configured with the resource and filters to fetch the appropriate data. The defaultValue is set to appData?.categoryID. 4. Form Rendering: The Select component is rendered within the Edit component, using the getInputProps and selectProps to bind the form state and options. References - useSelect Example (https://refine.dev/docs/data/hooks/use-select#example) - Edit Component Usage (https://refine.dev/docs/ui-integrations/mantine/components/basic-views/edit) - useSelect FAQ (https://refine.dev/docs/ui-integrations/mantine/hooks/use-select#how-to-ensure-defaultvalue-is-included-in-the-options) If you encounter any specific errors, please provide the error message for more targeted assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

kapa.ai•7mo ago

Sorry @Matt, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

provincial-silverOP•7mo ago

I cant see any differenec