Clear multiple select fields values in react-select from external action

Question

I am using https://github.com/JedWatson/react-select to display set of single/multiple select lists in the UI. And now I need to clear all the fields values at once.

In the docs there are options to add a clear button into or next to the element - Clearable property. But I want to call it from outside the elements on the container component level, using redux states for example.

Component structure is as follows:

  renderSelectFilters() {
    const { filters } = this.props;
    return (
      filters.map((filter) => {
        if (filter.type == 'Checkbox' || filter.type == 'Select') {
          return (
            <SelectContainer
              key={filter.name}
              name={filter.name}
              options={filter.options}
              multi={filter.type == 'Checkbox' ? true : false}
              handleChange={this.handleChange}
              clearValues={this.clearValues}
              searchable={filter.type == 'Checkbox' ? true : false}
            />
            );
        }
      })
    )
  }
  clearFilters() {
      //stuff here
  }

  renderClearFiltersButton = () => { 
    return ( 
      <Button 
        text={'Clear Filters'} 
        onClick={this.clearFilters} 
      /> 
    ) 
  } 

   render() {
    return (
      <div className="filters-bar">
        <div className="some-class">
          {this.renderSelectFilters()}
          {this.renderClearFiltersButton()}
        </div>
      </div>
    )
  }

I've checked this solution React-select clear value while keeping filter but it's about setting the existing value not completely removing the value.

Answer 1

I would sync react-select value with redux so that when you clear the value in redux it would be automatically cleared on react-select.