managerial-maroonM
Refine•2y ago•
4 replies
managerial-maroon

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,
      };
    },
  },
});


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


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