Failed prop type: The prop `option.name` is marked as required in `Option`, but its value is `undefined`.

[ivanjeremic]

trafficstars

I use SelectSearch with a filter like this

<SelectSearch
                options={[]}
                getOptions={() => {
                  return new Promise((resolve, reject) => {
                    try {
                      const exchangeList = ccxt.exchanges.map(
                        (exchange: any) => ({
                          value: exchange,
                          name: exchange,
                        })
                      );
                      resolve(exchangeList);
                    } catch (error) {
                      reject(error);
                    }
                  });
                }}
                search
                filterOptions={fuzzySearch}
                emptyMessage="Not found"
                placeholder="Choose your Exchange"
                onChange={(value) => console.log('SelectedVal', value)}
              />

I see that the filter works because the right number of items gets shown to me but with no text inside them, I use the fuzzySearch code from the example but even when I rewrite it to use the original example dfrom Storybook I get the same issue no text is displayed when I start typing to filter something all I get is this error in the console

Warning: Failed prop type: The prop `option.name` is marked as required in `Option`, but its value is `undefined`.
   at ul
   at OptionsList (http://localhost:1212/dist/renderer.dev.js:261761:3)
   at div
   at Options (http://localhost:1212/dist/renderer.dev.js:261643:3)
   at div
   at http://localhost:1212/dist/renderer.dev.js:261857:10
   at div
   at Styled(div) (http://localhost:1212/dist/renderer.dev.js:32578:66)
   at FormControl (http://localhost:1212/dist/renderer.dev.js:5660:86)
   at div
   at Styled(div) (http://localhost:1212/dist/renderer.dev.js:32578:66)
   at ModalBody (http://localhost:1212/dist/renderer.dev.js:12662:5)
   at section
   at MotionComponent (http://localhost:1212/dist/renderer.dev.js:214013:73)
   at Styled(Component) (http://localhost:1212/dist/renderer.dev.js:32578:6

[icaroscherma]

I don't know how ccxt.exchanges looks like but it seems that you're trying to achieve an ajax query without using ajax. :P

getOptions it's for assynchronously get options, in other terms you don't have the options already "in your hands", you need to fetch it then update the options.

But as you're not using a method to actually retrieve it, it seems that you already have the data locally*, you would only need to sanitize it into the desired format, so instead of getOptions maybe:

<Select
  options={ccxt.exchanges.map(exchange => ({
    value: exchange,
    name: exchange,
  }))}
/>

*- I assumed ccxt after properly retrieved, to be something like:

const ccxt = {
  foo: 'bar',
  exchanges: ['BRL', 'CAD', 'USD', 'AUD'],
};

And you're trying to transform the options to something like:

const options = [
  {id: "BRL", name: "BRL"},
  {id: "CAD", name: "CAD"},
  {id: "USD", name: "USD"},
  {id: "AUD", name: "AUD"},
];