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
kapa.ai7mo 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
kapa.ai7mo ago
<@617879699363725341> kapa.ai is still learning and improving, please let us know how it did by reacting below
vulnerable-emerald
vulnerable-emerald7mo ago
Rewrite it for me using tsx @kapa.ai Rewrite it for me using tsx
kapa.ai
kapa.ai7mo 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
kapa.ai7mo ago
<@617879699363725341> kapa.ai is still learning and improving, please let us know how it did by reacting below