extended-salmon•10mo ago

useSelect

const { selectProps } = useSelect({
    resource: `master-data/${props.urlApi}`,
    optionLabel: "name",
    optionValue: "id",
  });

const { selectProps } = useSelect({
    resource: `master-data/${props.urlApi}`,
    optionLabel: "name",
    optionValue: "id",
  });

how to display the optionLabel is code and name

5 Replies

kapa.ai•10mo ago

Hi @hoaanhtuc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To display both code and name as the optionLabel in the useSelect hook, you can use a function for the optionLabel property. This function receives the option as an argument and should return the string you want to display. Here's how you can modify your useSelect hook:

const { selectProps } = useSelect({
    resource: `master-data/${props.urlApi}`,
    optionLabel: (option) => `${option.code} ${option.name}`,
    optionValue: "id",
});

const { selectProps } = useSelect({
    resource: `master-data/${props.urlApi}`,
    optionLabel: (option) => `${option.code} ${option.name}`,
    optionValue: "id",
});

In this example, the optionLabel function combines the code and name properties of each option with a space in between. This approach was discussed in a Discord support thread (https://discord.com/channels/837692625737613362/1117482570494521375) about combining option labels in the useSelect hook of refine antd. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@617879699363725341> kapa.ai is still learning and improving, please let us know how it did by reacting below

extended-salmon•10mo ago

Rewrite it for me using tsx @kapa.ai Rewrite it for me using tsx

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, here's how you can modify your useSelect hook in TypeScript (tsx):

const { selectProps } = useSelect({
    resource: `master-data/${props.urlApi}`,
    optionLabel: (option: { code: string, name: string }) => `${option.code} ${option.name}`,
    optionValue: "id",
});

const { selectProps } = useSelect({
    resource: `master-data/${props.urlApi}`,
    optionLabel: (option: { code: string, name: string }) => `${option.code} ${option.name}`,
    optionValue: "id",
});

In this example, the optionLabel function combines the code and name properties of each option with a space in between. The option parameter of the function is typed as an object with code and name properties, both of which are strings. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@617879699363725341> kapa.ai is still learning and improving, please let us know how it did by reacting below