narrow-beige
narrow-beige9mo ago

Select defaultValue does not work on create page

How do you set a defaultvalue for select component on create page?
4 Replies
kapa.ai
kapa.ai9mo ago
Hi @silentnyte. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Refine, you can set a default value for a select component using the defaultValue property in the useSelect hook. Here is an example:
import { useSelect } from "@refinedev/antd";
import { Select } from "antd";

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

const PostCreate: React.FC = () => {
const { selectProps } = useSelect<ICategory>({
resource: "categories",
defaultValue: 11,
});

return (
<Select
placeholder="Select a category"
style={{ width: 300 }}
{...selectProps}
/>
);
};
import { useSelect } from "@refinedev/antd";
import { Select } from "antd";

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

const PostCreate: React.FC = () => {
const { selectProps } = useSelect<ICategory>({
resource: "categories",
defaultValue: 11,
});

return (
<Select
placeholder="Select a category"
style={{ width: 300 }}
{...selectProps}
/>
);
};
In this example, the defaultValue is set to 11. The useSelect hook sends a useMany query to the backend with the defaultValue and appends it to the options of the Select component, ensuring the default values exist in the current options array. For more information, refer to the useSelect documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/) and useMany documentation (https://refine.dev/docs/api-reference/core/hooks/data/useMany/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai9mo ago
<@395261846862561301> kapa.ai is still learning and improving, please let us know how it did by reacting below
equal-aqua
equal-aqua9mo ago
Hello @silentnyte was bot's answer sufficient for you?
narrow-beige
narrow-beige9mo ago
The above is not sufficient when using Chakra you also need to useEffect setValue.