I am using React-Select because of its ability to enable users to filter the dropdown as they type. I need to add another functionality whereby based on another value of a dropdown, the next dropdown should be visible or hidden.

I am aware of how to pass in props from parent-child. What I am unable to figure out is how can i go about making that React-Select disappear? I checked the docs here and there is no such property.

I tried with manually editing the HTML attribute: display = "none" or "block", but it does not seem to change anything.

Here is how it looks like now:

<FormGroup row>
    <Col md={6}>
        <Select 
            placeholder={label}
            name={fieldName}
            onChange={method1}
            options={options}
            display="none" />
    </Col>
</FormGroup>

I have found a work around this problem for those with similar situation as me, check it out here.

I am using React-Select because of its ability to enable users to filter the dropdown as they type. I need to add another functionality whereby based on another value of a dropdown, the next dropdown should be visible or hidden.

I am aware of how to pass in props from parent-child. What I am unable to figure out is how can i go about making that React-Select disappear? I checked the docs here and there is no such property.

I tried with manually editing the HTML attribute: display = "none" or "block", but it does not seem to change anything.

Here is how it looks like now:

<FormGroup row>
    <Col md={6}>
        <Select 
            placeholder={label}
            name={fieldName}
            onChange={method1}
            options={options}
            display="none" />
    </Col>
</FormGroup>

I have found a work around this problem for those with similar situation as me, check it out here.

• javascript
• reactjs
• react-select

3 Answers 3

Here you go with a solution

const customStyles = {
  singleValue: (provided, state) => {
    const display = "none";
    return { ...provided, display };
  }
}

<FormGroup row>
  <Col md={6}>
    <Select styles={customStyles} />
  </Col>
</FormGroup>

Documentation: https://react-select./styles#style-object

If you just want it to to disappear immediately (provide shouldDisplay value yourself):

render() {
  return (
    <FormGroup row>
        <Col md={6}>
            { !shouldDisplay ? null : (
              <Select 
                  placeholder={label}
                  name={fieldName}
                  onChange={method1}
                  options={options}
                  display="none" />
            )}
        </Col>
    </FormGroup>
   )
}

Or, if you want some css rules with transition appear, wrap Select with a ponent which styles you can control.

render() {
  return (
    <FormGroup row>
      <Col md={6}>
        <div style={{display: "none"}}>
          <Select 
              placeholder={label}
              name={fieldName}
              onChange={method1}
              options={options}
              display="none"
          />
        </div>
      </Col>
    </FormGroup>
  )
}

For Bootstrap 4:

<FormGroup row>
  <Col md={6}>
    <Select className="d-none" />
  </Col>
</FormGroup>

For Bootstrap 3:

<FormGroup row>
  <Col md={6}>
    <Select className="hide" />
  </Col>
</FormGroup>