Returning ReactNode from custom getOptionLabel

Hi, just going through the process of upgrading to v2. I noticed that the new getOptionLabel field returns a string. This is true of the current TypeScript definitions also.

In practise however, I am able to return a ReactNode from this function and have it render appropriately, eg:

const renderOption = (option: Readonly<Option>) => (
  <div className={styles.option}>
    <QuestionTypeIcon type={option.value} />
    <div className={styles.label}>{option.label}</div>
  </div>
)

// ...

<Select
  // Cast to permit non-string return type
  getOptionLabel={renderOption as any}
  // ...
/>

I would like to update the DefinitelyTyped definitions, my question is this: Is this an actual feature of react-select that has been mis-typed, or am I exploiting some accidental undefined behaviour? If the former is true I will update the types appropriately.

I’m not familiar with flow, but this may or may not be a consideration for the types in this repository also.

Thanks.

[rhys-vdw]

Thanks @gwyneplaine, this is the answer I was looking for; my example is a misuse of the API. Not something I feel strongly about because at the moment we’re sticking with version 1 as the upgrade cost is too high.

It does seem like there is a lot of overhead to customizing components in v2 with the new components API, but I’m sure I’m far too late to the party for that discussion! I am content to write my own wrapper component to handle our use case.

I am happy for this issue to be closed, but I’ll leave it open in case you agree with me that a note on use of getOptionLabel with aria attributes in the docs would be helpful in future.

[n9]

Try formatOptionLabel.