The default value seems to not be valid for the Select component, mode='multiple '
The data comes back fine, but it is not displayed on the component
I wrote it with reference to this, but this one is single-select 👇
https://github.com/refinedev/refine/blob/master/examples/form-antd-use-form/src/pages/posts/edit.tsx
I've tried giving a default value manually 👇
But it didn't live up to my expectations
The component will look like this
Need your help! thank you!👨🏻💻
GitHub
refine/edit.tsx at master · refinedev/refine
Build your React-based CRUD applications, without constraints. - refine/edit.tsx at master · refinedev/refine
6 Replies
Hi @greenking19. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
It seems like you're trying to use the
useSelect
hook for a multi-select component. The defaultValue
property accepts both single values and arrays of values. However, you also need to make sure that the Ant Design Select
component is set to allow multiple selections.
To achieve this, you can update your Select
component by adding the mode
prop and setting it to "multiple"
:
This should allow you to use the useSelect
hook with multiple default values as you've specified in your code:
For more information on the useSelect
hook, you can 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:
----------------------<@1011989779199574036> kapa.ai is still learning and improving, please let us how it did by reacting below
deep-jade•2y ago
Hey @greenking19,
defaultValue prop on useSelect just fetch the given values and add among the select options. So, you can use the defaultValue of Select component. Also, if you use the useForm hook, you can set field values by using useForm return function
ambitious-aqua•2y ago
I found a solution🥳
ambitious-aqua•2y ago
Github is written in a single choice
github: https://github.com/refinedev/refine/blob/master/examples/form-antd-use-form/src/pages/posts/edit.tsx
This is required if it is multi-select
I hope you can add this feature to the example so that it will be convenient for other developers
Thank you for your help🥳
GitHub
refine/edit.tsx at master · refinedev/refine
Build your React-based CRUD applications, without constraints. - refine/edit.tsx at master · refinedev/refine
ambitious-aqua•2y ago
Sorry, this still doesn't work, and you still need to use form.setFieldsValue in the end.
Forgot to comment the code just now
😢