jolly-crimson•6mo 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}`,
  });

3 Replies

kapa.ai•6mo ago

Hi @Jaoc1811. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- 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 optionLabel in useSelect 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 optionLabel and optionValue 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 prop of the Select 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 :speech_balloon: ----------------------

kapa.ai•6mo ago

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

jolly-crimson•6mo ago

Solved, I had to update the packages, thanks!