passive-yellow•14mo ago

Dependency between two useSelect

Is there any way to acheive a Select form item depending on another one. Suppose we have tow Select Dropdowns in a form for choosing "sate" and "city", I want cities to be filtered out by the currently selected "states", both state and cities are retrieved from a rest api backend.

4 Replies

kapa.ai•14mo ago

Hi @merabtene. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can achieve this by using the useSelect hook from Refine for both "state" and "city" dropdowns. When the "state" dropdown value changes, you can update the filters for the "city" dropdown to fetch cities related to the selected state. Here's an example using the useSelect hook from the Ant Design package:

import { useSelect } from "@refinedev/antd";
import { Select } from "antd";

interface IState {
  id: number;
  name: string;
}

interface ICity {
  id: number;
  name: string;
  stateId: number;
}

const LocationForm: React.FC = () => {
  const { selectProps: stateSelectProps } = useSelect<IState>({
    resource: "states",
  });

  const { selectProps: citySelectProps, setFilters } = useSelect<ICity>({
    resource: "cities",
  });

  const handleStateChange = (stateId: number) => {
    setFilters([
      {
        field: "stateId",
        operator: "eq",
        value: stateId,
      },
    ]);
  };

  return (
    <>
      <Select
        placeholder="Select a state"
        style={{ width: 300 }}
        {...stateSelectProps}
        onChange={handleStateChange}
      />
      <Select
        placeholder="Select a city"
        style={{ width: 300 }}
        {...citySelectProps}
      />
    </>
  );
};

import { useSelect } from "@refinedev/antd";
import { Select } from "antd";

interface IState {
  id: number;
  name: string;
}

interface ICity {
  id: number;
  name: string;
  stateId: number;
}

const LocationForm: React.FC = () => {
  const { selectProps: stateSelectProps } = useSelect<IState>({
    resource: "states",
  });

  const { selectProps: citySelectProps, setFilters } = useSelect<ICity>({
    resource: "cities",
  });

  const handleStateChange = (stateId: number) => {
    setFilters([
      {
        field: "stateId",
        operator: "eq",
        value: stateId,
      },
    ]);
  };

  return (
    <>
      <Select
        placeholder="Select a state"
        style={{ width: 300 }}
        {...stateSelectProps}
        onChange={handleStateChange}
      />
      <Select
        placeholder="Select a city"
        style={{ width: 300 }}
        {...citySelectProps}
      />
    </>
  );
};

In this example, when the "state" dropdown value changes, the handleStateChange function updates the filters for the "city" dropdown to fetch cities related to the selected state. For more information on the useSelect hook, refer to the Refine documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

passive-yellow•14mo ago

Still when editing an item, the initial filter of cities won't be applied correctly

foreign-sapphire•14mo ago

Hello @merabtene can you provide us a minimal reproducible example with tool of your choice (ie stackblitz), so we can help you?