How to create a multi-select control for resources with Antd?
I'm trying to build a select list which it can select multiple related resources (with Strapi v4 relation). However I found that useList can only select one item. Is there any way to make it select multiple resources?
https://refine.dev/docs/api-reference/core/hooks/data/useList/
useList | refine
useList data hook from refine is a modified version of react-query's useQuery for retrieving items from a resource with pagination, search, sort, and filter configurations.
5 Replies
ambitious-aqua•2y ago
Hey @_erichu
useList
does not support multiple resource
.
Meybe you can merge resources object.correct-apricot•2y ago
Hi @yildirayunlu, I'm new to refine.dev, could you please elaborate a bit? How to merge it?
ambitious-aqua•2y ago
Meybe you can write it.
correct-apricot•2y ago
Thanks for your reply. I think I found the problem now. I could just use
<Select with mode="multiple" />
. However, when I'm trying to save an item which is from strapi resource, (populated relation), the result would be like for example: { id: 1, categories: [{ id: 1, name: 'abc' }, { id: 2, name: 'def' }] }
. I'm using
which can successfully read the data from strapi. But when I try to save it (on an edit page), there is an error, since for strapi the posted data should be { id: 1, categories: [1, 2]}
. However using the form above will generate something like { id: 1, categofies: [{ id: 1 }, { id: 2} ]}
. How can I solve that problem?ambitious-aqua•2y ago
You can check here https://refine.dev/docs/api-reference/antd/hooks/form/useForm/#how-can-i-change-the-form-data-before-submitting-it-to-the-api
useForm | refine
useForm is used to manage forms. It is based on Antd Form and refine useForm to supports all the features of these packages and adds some additional features.