_kud's tech blog

[Reactive Search] Create a filter reset button

"Reset all the things!”

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!