Toggle Visibility based on Dropdown value 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});
}