Refine•4y ago

How to customize useSelect hooks optionLabel with multiple value?

I have implemented useSelect hook on create form and which is working fine. But now there is an requirement to show the label with combining multiple field.

For eg:
I have a data as

{
    [
        {
            id: 1,
            title: "E-business",
            code: "3234",
        },
        {
            id: 2,
            title: "Virtual Invoice Avon",
            code: "4232",
        },
        {
            id: 3,
            title: "Unbranded",
            code: "4232",
        },
    ];
}

{
    [
        {
            id: 1,
            title: "E-business",
            code: "3234",
        },
        {
            id: 2,
            title: "Virtual Invoice Avon",
            code: "4232",
        },
        {
            id: 3,
            title: "Unbranded",
            code: "4232",
        },
    ];
}

Now I want my

optionLabel

optionLabel

to be the combination of

title

title

and

code

code

E-business (3234)

E-business (3234)

Virtual Invoice Avon (4232)

Virtual Invoice Avon (4232)

, and

Unbranded (4232)

Unbranded (4232)

. Is there a way to achieve this?

spotty-amberOP•11/3/22, 12:02 PM

And also maybe if there is a possibility to pass a react node with custom design layout then that would be amazing

Omer•11/3/22, 2:34 PM

Hey @dipbazz

,
I hope you are very well. Can you check this thread?
https://discord.com/channels/837692625737613362/940873134020640788/940877337237528608

spotty-amberOP•11/4/22, 5:31 AM

Thank you @Omer. It worked as I expected.

skinny-azure•7/19/23, 9:38 AM

@Omer do you remember the actual thread you posted here? It's no longer visible and I have the exact same requirement

Bbastianwegge @Omer do you remember the actual thread you posted here? It's no longer visible ...

Omer•7/19/23, 10:03 AM

Hey @bastianwegge

,
We're happy to see you!
Unfortunately there isn't a very cool way but I created a CodeSandbox for you.

https://codesandbox.io/s/refine-use-select-example-forked-s55ne?file=/src/pages/posts/create.tsx

Omer•7/19/23, 10:03 AM

skinny-azure•7/20/23, 8:55 AM

@Omer thanks for the sollution! It's much nicer than what I have right now!

skinny-azure•7/20/23, 8:58 AM

I don't know if I should open a new thread for this but: Since you posted a way to display the ID of an entity. Is it possible to search by the title OR the id via filters?

skinny-azure•7/20/23, 9:15 AM

Ah I got it:

it's basically working like this!

Omer•7/20/23, 10:21 AM

You can use the property
https://refine.dev/docs/api-reference/core/hooks/useSelect/#defaultvalue

useSelect | refine

useSelect hook allows you to manage any select (like a Html `` tag, React Select, etc...) component. Since it is designed as headless, It expects you to handle the UI.

skinny-azure•7/20/23, 10:33 AM

What's your comment referring to?