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.
Share Improve this question edited Nov 8, 2018 at 8:52 AKJ asked Nov 8, 2018 at 5:55 AKJAKJ 8191 gold badge10 silver badges32 bronze badges3 Answers
Reset to default 2Here 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>