Problem

I’m using React Select but I’d like to change the text that appears ("No options") when I don’t have any options in the selector. How do I do this?

Solution

The React Select component has a prop named noOptionsMessage that allows you to pipe in a default value when the selector doesn’t have any options.

Usage is like:

<AsyncSelect
      ...
      noOptionsMessage{() => resx.MyComponent_NoOptionsMessage} />

This is useful if you require custom resx (i8n strings) or even if your selector is performing operations under the hood that make the default not quite right. For instance, in one of our builds we only show options once the user has started typing as a way of naively limiting the returned results. As such “no options” isn’t really right because there could certainly be options that we just haven’t loaded yet. We instead changed it to something of the effect “no options loaded - start typing to see results” to be more transparent about what was happening under the hood.