genetic-orange
genetic-orange12mo 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
kapa.ai12mo 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
kapa.ai12mo ago
<@968574890586300437> kapa.ai is still learning and improving, please let us how it did by reacting below
genetic-orange
genetic-orange12mo ago
Still when editing an item, the initial filter of cities won't be applied correctly
wise-white
wise-white12mo ago
Hello @merabtene can you provide us a minimal reproducible example with tool of your choice (ie stackblitz), so we can help you?