genetic-orange•16mo ago

using multiple fields for the label in select ant design

Is it possible to use multiple fields in the label of a select options prop from ant design example would be our interface has firstName, lastName, id we want the select to value to be the id and the label to be the firstName and the lastName together.

11 Replies

kapa.ai•16mo ago

Hi @erekyu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to use multiple fields in the label of a select options prop from Ant Design when using Refine's useSelect hook. You can achieve this by using a custom function for the optionLabel property. Here's an example based on your requirements:

const { selectProps } = useSelect({
  resource: "users",
  optionLabel: (record) => `${record.firstName} ${record.lastName}`,
  optionValue: "id",
});

const { selectProps } = useSelect({
  resource: "users",
  optionLabel: (record) => `${record.firstName} ${record.lastName}`,
  optionValue: "id",
});

In this example, the optionLabel property is set to a function that takes a record and returns a string combining the firstName and lastName fields. The optionValue property is set to "id" as you mentioned. For more information on useSelect, refer to the documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

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

genetic-orange•16mo ago

@kapa.ai the optionLabel is giving an error when attempting to use (record) Type '(record: any) => string' is not assignable to type '"id"'.ts(2322) index.d.ts(13, 5): The expected type comes from property 'optionLabel' which is declared here on type 'UseSelectProps<{ "id": any; }, HttpError, { "id": any; }>'

kapa.ai•16mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Apologies for the confusion. It seems that the optionLabel property does not directly support a function in the provided extracts. However, you can still achieve the desired result by modifying the data before passing it to the useSelect hook. First, fetch the data using useQuery or a similar method, then modify the data to create a new field that combines firstName and lastName. Finally, pass the modified data to the useSelect hook using the data property. Here's an example:

import { useQuery } from "@pankod/refine";

const { data } = useQuery({ resource: "users" });

const modifiedData = data?.map((record) => ({
  ...record,
  fullName: `${record.firstName} ${record.lastName}`,
}));

const { selectProps } = useSelect({
  resource: "users",
  optionLabel: "fullName",
  optionValue: "id",
  data: modifiedData,
});

import { useQuery } from "@pankod/refine";

const { data } = useQuery({ resource: "users" });

const modifiedData = data?.map((record) => ({
  ...record,
  fullName: `${record.firstName} ${record.lastName}`,
}));

const { selectProps } = useSelect({
  resource: "users",
  optionLabel: "fullName",
  optionValue: "id",
  data: modifiedData,
});

In this example, we fetch the data using useQuery, create a new field fullName by combining firstName and lastName, and then pass the modified data to the useSelect hook using the data property. For more information on useSelect, refer to the documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

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

graceful-blue•16mo ago

hi @erekyu, did the bot's answer work?

genetic-orange•16mo ago

No but it gave me an idea to try so I am working on this and if it works ill comment here. none of that works, looks like optionLabel only accepts one field still racking my brain lol

graceful-blue•16mo ago

let assume you have data like this:

const data = [
    {
        id: 1,
        name: "name1",
        surname: "surname2",
    },
    {
        id: 2,
        name: "name2",
        surname: "surname2",
    },
];

const data = [
    {
        id: 1,
        name: "name1",
        surname: "surname2",
    },
    {
        id: 2,
        name: "name2",
        surname: "surname2",
    },
];

you want to create <Select> component with antd and you want to list this options label: name + surname did i understand correctly ?

genetic-orange•16mo ago

yes

graceful-blue•16mo ago

unfortunately, useSelect does not support multiple field to calculate label. you can transform API response with queryOptions to merge multiple field

  const { selectProps: categorySelectProps } = useSelect({
    resource: "categories",
    fetchSize: 20,
    optionLabel: "fullName",
    optionValue: "id",
    queryOptions: {
      select: (data) => {
        return {
          data: data?.data?.map((item: any) => ({
            ...item,
            fullName: `${item.name} ${item.surname}`
          })),
          total: data.total
        };
      }
    }
  });

  const { selectProps: categorySelectProps } = useSelect({
    resource: "categories",
    fetchSize: 20,
    optionLabel: "fullName",
    optionValue: "id",
    queryOptions: {
      select: (data) => {
        return {
          data: data?.data?.map((item: any) => ({
            ...item,
            fullName: `${item.name} ${item.surname}`
          })),
          total: data.total
        };
      }
    }
  });

i created working example here: https://codesandbox.io/s/unruffled-fire-zvel8c?file=/src/pages/posts/list.tsx:213-272

genetic-orange•16mo ago

that works perfectly thank you, would you happen to know how to add a populate to that query for strapi? as part of the data I want is in a component and it needs the populate command in the query I figured out what i was doing wrong, the metaData has to go in the body of useSelect not in the queryOptions{}