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)
  selectedOption: option.text,
  selectedValue: option.key.toString()

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

public clearForm= (): void =>  {

1 Answer 1


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

    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.

  • Thank you! Now I have an other Problem. The placeholder stays everytime "Bitte wählen" and does not change to the selectedOption. Any idea, why? Without selectedKey = {this.state.selectedOptions} is right, but it cant be reseted... Feb 22 at 10:56
  • Are you sure that the value of your SelectedKey is actually a "key" and no the "text". Check your UpdateState function: this.setState({ selectedOption: option.key, selectedValue: option.key.toString() });
    – Vertamin
    Feb 22 at 19:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.