How to set useSelect filters dynamically?

I want to set filters value of useSelect hook dynamically based on some value from API query. Is there a way to to that? For example, I have a form and based on one field value I want to filter the select query how can I filters based on the another form field value. I can get the form value using a watch but have hard time figuring out how to set the filters based on another field value.
7 Replies
kapa.ai
kapa.ai3y ago
Hi @dipbazz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai3y ago
---------------------- Yes, you can set the filters value of the useSelect hook dynamically based on a value from another form field using the watch function from React Hook Form. Here's how you can achieve this: 1. Destructure the watch function from the useForm hook. 2. Declare a variable to track the value of the form field you want to use for filtering. 3. Pass the watch method to the variable with the form field name as a parameter. 4. Use the variable in the onSearch function of the useSelect hook to set the filters dynamically. Here's an example:
import { useForm } from "react-hook-form";
import { useSelect } from "@refinedev/core";

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

const MyForm: React.FC = () => {
const {
control,
watch,
} = useForm();

const fieldValue = watch("fieldToWatch");

const { options, onSearch } = useSelect<ICategory>({
resource: "categories",
onSearch: (value) => [
{
field: "title",
operator: "contains",
value: fieldValue, // Use the watched field value for filtering
},
],
});

// Render your form and select component
};
import { useForm } from "react-hook-form";
import { useSelect } from "@refinedev/core";

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

const MyForm: React.FC = () => {
const {
control,
watch,
} = useForm();

const fieldValue = watch("fieldToWatch");

const { options, onSearch } = useSelect<ICategory>({
resource: "categories",
onSearch: (value) => [
{
field: "title",
operator: "contains",
value: fieldValue, // Use the watched field value for filtering
},
],
});

// Render your form and select component
};
In this example, replace "fieldToWatch" with the name of the form field you want to use for filtering. The fieldValue variable will hold the value of the watched form field, and it will be used in the onSearch function to set the filters dynamically. Refer to the following extracts for more information: - React Hook Form Validation with Complete Examples (https://refine.dev/blog/react-hook-form-validation-examples/) - useSelect Hook (https://refine.dev/docs/api-reference/core/hooks/useSelect) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
React Hook Form Validation with Complete Examples | refine
We'll implement React Hook Form custom validations and schema validations using yup.
useSelect | refine
useSelect hook allows you to manage any select (like a Html `` tag, React Select, etc...) component. Since it is designed as headless, It expects you to handle the UI.
kapa.ai
kapa.ai3y ago
<@494653850632978472> kapa.ai is still learning and improving, please let us how it did by reacting below
exotic-emerald
exotic-emeraldOP3y ago
@kapa.ai I am not using react hook form. I am using antd form.
kapa.ai
kapa.ai3y ago
Let me check the knowledge base for you again. One moment! :books:
kapa.ai
kapa.ai3y ago
---------------------- Apologies for the confusion. If you're using Ant Design Form, you can achieve the same dynamic filtering by using the getFieldValue method from the form instance. Here's how you can do it: 1. Destructure the form instance from the useForm hook. 2. Use the getFieldValue method to get the value of the form field you want to use for filtering. 3. Pass the value to the filters property of the useSelect hook. Here's an example:
import { useForm } from "antd/lib/form/Form";
import { useSelect } from "@refinedev/core";

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

const MyForm: React.FC = () => {
const [form] = useForm();

const fieldValue = form.getFieldValue("fieldToWatch");

const { selectProps } = useSelect<ICategory>({
resource: "categories",
filters: [
{
field: "title",
operator: "contains",
value: fieldValue, // Use the value from the form field for filtering
},
],
});

// Render your form and select component
};
import { useForm } from "antd/lib/form/Form";
import { useSelect } from "@refinedev/core";

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

const MyForm: React.FC = () => {
const [form] = useForm();

const fieldValue = form.getFieldValue("fieldToWatch");

const { selectProps } = useSelect<ICategory>({
resource: "categories",
filters: [
{
field: "title",
operator: "contains",
value: fieldValue, // Use the value from the form field for filtering
},
],
});

// Render your form and select component
};
In this example, replace "fieldToWatch" with the name of the form field you want to use for filtering. The fieldValue variable will hold the value of the form field, and it will be used in the filters property to set the filters dynamically. Refer to the following extracts for more information: - useSelect Hook (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect) - Ant Design Form (https://ant.design/components/form) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
useSelect | refine
useSelect hook allows you to manage Ant Design `` component when records in a resource needs to be used as select options.
kapa.ai
kapa.ai3y ago
<@494653850632978472> kapa.ai is still learning and improving, please let us how it did by reacting below

Did you find this page helpful?