inc-lavender•6mo ago

Multiple fields as label for Ant Design's select

Based on a question in this channel titled using multiple fields for the label in select ant design, I used @Alican Erdurmaz's suggested code and arrived at the following result:

import { useSelect } from "@refinedev/antd";
// ...
const { selectProps: storeSelectProps } = useSelect({
  resource: LOCALE_STORE_RESOURCE,
  optionLabel: "fullName",
  optionValue: "id",
  queryOptions: {
    select: (data) => {
      return {
        data: data?.data?.map((item: any) => ({
          ...item,
          fullName: `${item.cnpj} - ${item.name}`,
        })),
        total: data.total,
      };
    },
  },
});

import { useSelect } from "@refinedev/antd";
// ...
const { selectProps: storeSelectProps } = useSelect({
  resource: LOCALE_STORE_RESOURCE,
  optionLabel: "fullName",
  optionValue: "id",
  queryOptions: {
    select: (data) => {
      return {
        data: data?.data?.map((item: any) => ({
          ...item,
          fullName: `${item.cnpj} - ${item.name}`,
        })),
        total: data.total,
      };
    },
  },
});

The problem here is that this throws a Typescript error for keys optionLabel and optionValue:

Type 'string' is not assignable to type 'undefined'.ts(2322)
index.d.ts(14, 5): The expected type comes from property 'optionLabel' which is declared here on type 'UseSelectProps<BaseRecord, HttpError, any>'
(property) optionLabel?: "fullName" | "id" | undefined

Type 'string' is not assignable to type 'undefined'.ts(2322)
index.d.ts(14, 5): The expected type comes from property 'optionLabel' which is declared here on type 'UseSelectProps<BaseRecord, HttpError, any>'
(property) optionLabel?: "fullName" | "id" | undefined

I can't figure out how to fix this. Does anyone have any ideas?

3 Replies

kapa.ai•6mo ago

Hi @Chrystian Ferreira. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The extracts provided do not cover the specific issue of using TypeScript with custom fields created through a select query option in the useSelect hook from refine. The error you're encountering seems to be related to TypeScript type definitions not recognizing dynamically created fields (fullName in your case) as valid options for optionLabel and optionValue. However, for general guidance on using the useSelect hook with Ant Design's <Select> component, including how to customize option labels and values, you might find the official refine documentation helpful: - For basic usage of useSelect: useSelect Hook (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-select/) - For changing the label and value properties in options: How to change the label and value properties in options (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-select#how-to-change-the-label-and-value-properties-in-options) If you're dealing with TypeScript errors, it might also be beneficial to review TypeScript's documentation on type assertions and interfaces, as you may need to extend or override the default types provided by refine to accommodate your custom fields. For more specific help with your TypeScript error, consider reaching out to the refine community or checking if there are similar issues reported in the refine GitHub repository (https://github.com/refinedev/refine). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

foreign-sapphire•5mo ago

Hello @Chrystian Ferreira, you need to give type to useSelect

  const { selectProps: storeSelectProps } = useSelect<{ fullName: string; id: string }>({
    resource: 'LOCALE_STORE_RESOURCE',
    optionLabel: 'fullName',
    optionValue: 'id',
    queryOptions: {
      select: (data) => {
        return {
          data: data?.data?.map((item: any) => ({
            ...item,
            fullName: `${item.cnpj} - ${item.name}`,
          })),
          total: data.total,
        }
      },
    },
  })

  const { selectProps: storeSelectProps } = useSelect<{ fullName: string; id: string }>({
    resource: 'LOCALE_STORE_RESOURCE',
    optionLabel: 'fullName',
    optionValue: 'id',
    queryOptions: {
      select: (data) => {
        return {
          data: data?.data?.map((item: any) => ({
            ...item,
            fullName: `${item.cnpj} - ${item.name}`,
          })),
          total: data.total,
        }
      },
    },
  })