[Reactive Search] Create a filter reset button

Here in this post, I'll explain how to create a button to reset all filters in Reactive Search.

You already probably know the component <SelectedFilters /> but this one doesn't only display a clear all button, it also creates a button on each filter selected.

To only display a reset button, it is quite easy. Just use the render method of <SelectedFilters /> which gives you two functions: clearValues() and setValue(component, value), and use the one we want (clearValues), like that:

1class ReactiveClearAllFilters extends React.Component {
2  render() {
3    const { ...rest } = this.props
4
5    return (
6      <SelectedFilters
7        render={({ clearValues }) => (
8          <button type="button" onClick={clearValues}>
9            {"Reset"}
10          </button>
11        )}
12        {...rest}
13      />
14    )
15  }
16}
17

💥, it is done!