fascinating-indigo•2y ago

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•2y 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•2y 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•2y ago

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

fascinating-indigo•2y ago

@kapa.ai I am not using react hook form. I am using antd form.

kapa.ai•2y ago

Let me check the knowledge base for you again. One moment! :books:

kapa.ai•2y 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.

Form - Ant Design

kapa.ai•2y ago

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