How to reset Office UI Fabric Dropdown

Question

My this.handleReset() does not working. Any idea, why?

<Dropdown options={this.state.options}
                  placeholder= "Bitte wählen..."
                  onChange={ this.handleChange }
                  required= {true}/>

<DefaultButton className={styles.btn2} onClick={()=> this.clearForm()}> Abbrechen </DefaultButton>

 handleChange = (event: FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
console.log("Selected Option: " + option.text)
this.setState({
  selectedOption: option.text,
  selectedValue: option.key.toString()
});

handleReset = () => {
this.setState({ selectedOption: "" });

public clearForm= (): void =>  {
this.handleReset();

Answer 1

You are not telling the drop down which is its selectedKey.

<Dropdown
    options={this.state.options}
    placeholder= "Bitte wählen..."
    onChange={ this.handleChange }
    selectedKey={this.state.selectedOption} <- This line is missing
    required= {true}
/>

Since you are not telling the component which is its "SelectedKey" it won't detect if you empty the state in your "handleReset" function.