[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.props45 return (6 <SelectedFilters7 render={({ clearValues }) => (8 <button type="button" onClick={clearValues}>9 {"Reset"}10 </button>11 )}12 {...rest}13 />14 )15 }16}17
💥, it is done!