CODEWITHSUNDEEP
react-select
Rohan Khanna
Rohan Khanna

Reputation: 109

How do I hide an option in react-select

Basically i have two dropdowns. based on a value selected in one dropdown I want to hdie certain options in another dropdown.

I tried adding a className parameter to the option object along with label and value params and tried setting the display of all options with the above className to none but it did not set the className of the option to the one i specified. 

[{'label':'x','value':'y',className:'hide'}]
.hide{
display:none
}

Upvotes: 6

Views: 13758

Answers (2)

MohammadMahboobi
MohammadMahboobi

Reputation: 31

According to https://react-select.com/props

filterOption

Custom method to filter whether an option should be displayed in the menu

You just need to use filterOption
For example if you want to hide an option with value="hiddenOption" you need :

<Select filterOption={(option) => option.value !== "hiddenOption"} />

Upvotes: 3

only_one
only_one

Reputation: 552

You can do that using custom option, documentation for v2 is here: https://react-select.com/components#replacing-components

But in your case, i think you should add some value to object list, for example:

{label: 'Example', value: '1234', shouldBeDisplayed:'false'}

Next step is customize custom option:

const option = (props: OptionProps<any>) => (
  <div {...props.innerProps}>
    {props.data.shouldBeDisplayed? props.label : null}
  </div>
);

Using inside select:

<Select components={{ Option: option }} ..... />

Hope it helps :)

Upvotes: 2

Related Questions