Is it possible to clear the values in a People Picker by clicking a separate button

Question

I want to clear the values selected in a NormalPeoplePicker through a button click, but setting state controlled "defaultSelectedUsers" value to [] does not work:

<PeoplePicker
  people={data.user}
  title={"Users"}
  onChange={handleChange}
  defaultSelectedUsers={this.state.selectedPersons}
  itemLimit={5}
  onSearchPeople={handleSearch}
/>
<PrimaryButton
  text={"Clear"}
  onClick={() => {this.setState({selectedPersons: []}}
/>

Is there a way to achieve this??

Thanks!!

Answer 1

Change the defaultSelectedUsers to selectedUsers and set the value (selectedPersons) to a empty array.

<PeoplePicker
  people={data.user}
  title={"Users"}
  onChange={handleChange}
  selectedUsers={this.state.selectedPersons}
  itemLimit={5}
  onSearchPeople={handleSearch}
/>