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
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
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:
----------------------<@480113761881948183> kapa.ai is still learning and improving, please let us know how it did by reacting below
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?
fascinating-indigoOP•7mo ago
I cant see any differenec