Refine•2y ago

optionLabel don't work as a function

I'm trying to use useSelect function with a custom label, for this the documentation says that you can use optionLabel as a function but is not working
I'm doing it like this:

  const { selectProps: vehiclesSelectProps } = useSelect({
    resource: "vehicles",
    optionLabel: (item: any) =>
      `${item.type.model}-${item.type.provider}-${item.plate}`,
  });

  const { selectProps: vehiclesSelectProps } = useSelect({
    resource: "vehicles",
    optionLabel: (item: any) =>
      `${item.type.model}-${item.type.provider}-${item.plate}`,
  });

  const { selectProps: vehiclesSelectProps } = useSelect({
    resource: "vehicles",
    optionLabel: (item: any) =>
      `${item.type.model}-${item.type.provider}-${item.plate}`,
  });

  const { selectProps: vehiclesSelectProps } = useSelect({
    resource: "vehicles",
    optionLabel: (item: any) =>
      `${item.type.model}-${item.type.provider}-${item.plate}`,
  });

kapa.ai•3/21/24, 4:50 PM

Hi @Jaoc1811. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•3/21/24, 4:51 PM

----------------------
Based on the knowledge sources provided, it seems that there has been a discussion about this feature in the Refine community. The feature to use a function for optionLabeloptionLabel in useSelectuseSelect was suggested in a Github issue (https://github.com/refinedev/refine/issues/4880), but it's not clear if this feature has been implemented yet.

The current documentation suggests that optionLabeloptionLabel and optionValueoptionValue are used to change the value of your options and they accept a string as their value. Here is an example from the documentation (https://refine.dev/docs/data/hooks/use-select/#optionlabel-and-optionvalue):

useSelect({  
 optionLabel: "name",  
 optionValue: "categoryId",  
});

useSelect({  
 optionLabel: "name",  
 optionValue: "categoryId",  
});

In your case, you might need to map your data to the desired format before passing it to the

options

options

prop of the SelectSelect component. Here is an example from a Github issue (https://github.com/refinedev/refine/issues/4880):

const { selectProps, queryResult, defaultValueQueryResult } = useSelect({
    resource: "resource",
});

const allOptions = [
    ...(queryResult?.data?.data || []),
    ...(defaultValueQueryResult?.data?.data || [])
];

<Select
    {...selectProps}
    options = {allOptions.map((p: IPoint) => ({
        label: `${p.location_name} - ${p.landmark}`,
        value: p.id
    }))}
/>

const { selectProps, queryResult, defaultValueQueryResult } = useSelect({
    resource: "resource",
});

const allOptions = [
    ...(queryResult?.data?.data || []),
    ...(defaultValueQueryResult?.data?.data || [])
];

<Select
    {...selectProps}
    options = {allOptions.map((p: IPoint) => ({
        label: `${p.location_name} - ${p.landmark}`,
        value: p.id
    }))}
/>

Please note that this is a workaround and might not be the best solution for your case. It's recommended to check the latest Refine documentation or their Github issues for the most up-to-date information.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•3/21/24, 4:51 PM

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

hurt-tomatoOP•3/21/24, 4:58 PM

Solved, I had to update the packages, thanks!