Hide React-Select

436 views javascript
2

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 
            display="none" />
    </Col>
</FormGroup>

answered question

2 Answers

13

Here you go with a solution (inline styling)

<FormGroup row>
  <Col md={6}>
    <Select style={{display: "none"}} />
  </Col>
</FormGroup>

posted this
13

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>

posted this

Have an answer?

JD

Please login first before posting an answer.