Search code examples
javascriptcssreactjsreact-selectreact-dom

react select options are not getting displayed properly


I am building an application using react, so I was using react-select library for select elements. I have followed the documentation and used it, but unfortunately the options are displaying in blue color, whereas if we see in the tutorial they are transparent, only the selected item highlights.

Here's the screenshot

Here's the codesandbox url : https://codesandbox.io/s/pwkl54q2jj

What workarounds I have tried:

  1. Downgrading react and react-dom versions.
  2. Taking out the component from CategoryForm component to App component where the state lies. Didn't work
  3. Tried out the code given in the documentation : https://codesandbox.io/s/vm8x1jmm00?module=/example.js in my setup by creating a new component and rendering it.
  4. Removing all the divs and abstracted select out of them.

Nothing works... Anyone help out here???

I hope I have provided all the info that's needed. Please comment if you need any more information.


Solution

  • Figured it out. Swap the name key for value in your categories array and it works.

    https://codesandbox.io/s/rm7pnv2xpq