Filtering an array and returning the entire array?

Question

JavaScript

Good evening!
There is an array
const Service = [];
There is a function on click:

clickButtonFilter = (name) =>{
        this.setState({ Service: this.state.Service }, () => {
            const arr = this.state.Service.filter(function (category) {
                if(category.category === name){
                    return category;
                }
            });
            this.setState({Service: arr});
            console.log(arr);
            debugger;
        });
    };

The bottom line is:
There are 3 buttons: each passes a category, falls into .filter and displays those elements that fall.
Everything works, filtered and displayed the elements that you need.
Question:
How to make it so that when you click again on another button (out of 3), it displays other values, and does not come with an empty array?

At the moment, I clicked on 1 button, it showed up, I pressed 2 or 3 buttons, the array is empty. Return the entire array to its original state.

Answer 1

Why are you doing setstate and writing data from the current state there? What is it anyway?

const Service = [...]

clickButtonFilter = name => {
  const arr = Service.filter(el => el.category === name)
  this.setState({Service: arr})
}