Back to home

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’s 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:

class ReactiveClearAllFilters extends React.Component {
  render() {
    const { } = this.props

    return (
        render={({ clearValues }) => (
          <button type="button" onClick={clearValues}>

💥, it’s done!