Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Returning ReactNode from custom getOptionLabel

See original GitHub issue

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>

// ...

  // 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.


Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

rhys-vdwcommented, Dec 27, 2018

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.

n9commented, Dec 5, 2018

Try formatOptionLabel.

Read more comments on GitHub >

github_iconTop Results From Across the Web

What is `getOptionSelected` and `getOptionLabel` in Material ...
I was going through Mui Documentation, in the Autocomplete component section I got two props , getOptionLabel and getOptionSelected which I ...
Read more >
API - React Select
getNewOptionData. Returns the data for the new option when it is created. Used to display the value, and is passed to onChange ....
Read more >
Autocomplete API - Material UI - MUI
Name Type Default options * array renderInput * func autoComplete bool false
Read more >
TS Support | React Hook Form - Simple React forms validation
This type is useful when you define custom component's name prop, ... This type will return union with all available paths that match...
Read more >
react-functional-select - npm
Property Type Default inputId string undefined selectId string undefined ariaLabel string undefined
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found