Hide React-Select

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.

2 answers

  • answered 2018-11-08 05:57 Shiladitya

    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.com/styles#style-object

  • answered 2018-11-08 05:59 K K

    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>