I want to combine option labels in the useSelect hook of refine antd.
This only shows firstName as label as expected.
I want to show both firstName and lastName. Is there a way to acheive this? I wanted something like:
27 Replies
Hi @srest.nishant. 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
optionLabel
property as a function. Here's how you can modify your useSelect
hook to display both firstName
and lastName
as the label:
This will concatenate the firstName
and lastName
properties of each option and display them as the label in the select component.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@717251086196539412> kapa.ai is still learning and improving, please let us how it did by reacting below
deep-jade•16mo ago
@kapa.ai It doesn't work.
Let me check the knowledge base for you. One moment! :books:
----------------------
I apologize for the confusion earlier. It seems that I made an error in my response. Based on the information provided in the extracts, the
optionLabel
property only accepts a string, not a function.
Unfortunately, the extracts do not provide a direct solution for displaying both firstName
and lastName
as the label using the useSelect
hook. However, you can refer to the refine useSelect documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/) for more information on its usage and properties.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------useSelect | refine
useSelect hook allows you to manage Ant Design `` component when records in a resource needs to be used as select options.
<@717251086196539412> kapa.ai is still learning and improving, please let us how it did by reacting below
fair-rose•16mo ago
Unfortunately, useSelect can't do this right now, but you can map the values as you want before passing the options property to the '<Select>' component.
Hey @srest.nishant ,
You can find an example here https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/#can-i-create-the-options-manually
useSelect | refine
useSelect hook allows you to manage Ant Design `` component when records in a resource needs to be used as select options.
deep-jade•16mo ago
Thank you, I used similar approach!
I'm happy to hear that 🎯
continuing-cyan•16mo ago
@Omer isn't what Nishant posted exactly what you would want to do? Is there a feature-request for this? Otherwise I'd be happy to open one 🙂
continuing-cyan•16mo ago
So I built this very ugly implementation on top of what Nishant did here:
As I need to access properties generically I use functions to get the correct properties out of a register for all of my models. Here I run into the problem that if I access a "Edit"-Page and the element that is received is not within the first 20 results, I don't see my label for the Select but just the ID (see screenshot).
continuing-cyan•16mo ago
There's a request running that filters for the correct ID, but the result is never properly used, as I have probably overwritten something that you do inside of Refine.
The type on
UseSelectProps
of optionLabel?: keyof TQueryFnData extends string ? keyof TQueryFnData : never;
is very restricting and casts the TQueryFnData
if it's not defined btw. I don't know if that's your intention here.
I don't know if somebody from @core could take a look here, I'd be very happy 🙂
@alicanerdurmaz do you maybe have a spare minute for this?stormy-gold•16mo ago
i trying to understand
continuing-cyan•16mo ago
I'm trying to reproduce using codesandbox as well.