Toggle Visibility based on Dropdown value ReactJS - reactjs

Question

I am trying to toggle the visibility of a Dropdown based on another Dropdown's value. So when the first option is selected, the second dropdown becomes visible below and when that option is no longer selected, the dropdown below vanishes.
Please bear with me as I am still learning. Any advice or help would be appreciated! Here is what I have so far:
const firstOptions = [
{ key: 0, value: 'default', text: '--Select an Option--' },
{ key: 1, value: 'option1', text: 'option1 - when I am selected another shall appear' },
{ key: 2, value: 'option2', text: 'option2' },
{ key: 3, value: 'option3', text: 'option3' },
];
const secondOptions = [
{ key: 0, value: 'default', text: '--Select an Option--' },
{ key: 1, value: 'option1', text: 'option1' },
{ key: 2, value: 'option2', text: 'option2' },
];
class DropdownToggle extends Component {
constructor(props) {
super(props);
this.state = {
selectedValue: 'default',
};
}
handleChange = (e) => {
this.setState({ selectedValue: e.target.value });
}
render() {
const message = 'You selected ' + this.state.selectedValue;
return (
<div style={{ marginTop: '50px', marginLeft: '50px' }}>
<Dropdown
options={firstOptions}
selection
value={this.state.selectedValue}
onChange={this.handleChange}
/>
<div style={{ marginTop: '50px' }}>
<Dropdown
options={secondOptions}
selection
/>
</div>
<p>{message}</p>
</div>
);
}
}

Answer 1

You can do conditional rendering to achieve desired behavior.
Example
render() {
const message = 'You selected ' + this.state.selectedValue;
return (
<div style={{ marginTop: '50px', marginLeft: '50px' }}>
<Dropdown
options={firstOptions}
selection
value={this.state.selectedValue}
onChange={this.handleChange}
/>
{
this.state.selectedValue === 'option1' ?
<div style={{ marginTop: '50px' }}>
<Dropdown
options={secondOptions}
selection
/>
</div>
: null
}
<p>{message}</p>
</div>
);
}
Update
Your handleChange function is not correct. According to Semantic-UI docs onChange fires with 2 parameters. event and data. If you change your function like below it should work.
onChange {func}
Called when the user attempts to change the value.
onChange(event: SyntheticEvent, data: object)
event React's original SyntheticEvent.
data All props and proposed value.
handleChange = (event, data) => {
console.log(data.value);
this.setState({selectedValue: data.value});
}

Answer 2

My solution uses React Hooks and I'm utilising state from the context of a React.FunctionComponent<ITypeProps> and detecting the current element in a generated dropdown to set the state (hide/show an element by adding Bootstrap style classes).
For simplicity of logic I am depicting a non-generated dropdown list & it's associated onChange event.
Hooks let you use React features (like state) from a function — by doing a single function call.
As per Making Sense of React Hooks.
const Manager: React.FunctionComponent<ITypeProps> = ({}) => {
const [state, setState] = React.useState({
showElement: false
});
const handleChange = (value) => {
if (value && (value == 1)
setState({ ...state, showElement: true });
else
setState({ ...state, showElement: false });
}
return
<div>
<select>
<option value="1" onChange={handleChange}>Item1 + Show Div</option>
<option value="2" onChange={handleChange}>Item2</option>
<option value="3" onChange={handleChange}>Item3</option>
</select>
<div className={state.showElement ? "d-block" : "d-none"}> Hide / Show me!</div>
</div>
}
What this will do:
On change of the select dropdown, it will update the state
If the selected value of the dropdown is "1", the boolean variable showElement will be true
If the selected value of the dropdown is anything but "1" the boolean variable showElement will be false
On change of the state the component will re-render
The visibility of the div will change with the state change to have either the style "display: block" or "display: none" as per the Bootstrap shorthand d-block and d-none.
I spent too long working out this really simple React feature.
So hopefully this simple example helps someone & saves you some time!