Estoy tratando de implementar una función de filtro simple en React. Tengo 6 botones y cada botón tiene un valor. Un botón puede estar seleccionado o no seleccionado. Solo necesito obtener todos los valores seleccionados. Mi idea era escribir el valor en una matriz cuando se hace clic en un botón. Cuando se hace clic en el botón por segunda vez, el elemento se elimina de la matriz. Probé una función que obtiene la matriz y el elemento que se alternará. Comprueba si la matriz ya tiene el elemento. Si es así, entonces usa un filtro para eliminarlo. Si no, usa el operador de propagación para crear una nueva matriz que contiene los valores de la matriz proporcionada más el nuevo elemento. Mi componente y la función se ve así:

 export default class App extends Component { constructor(props) { super(props); this.handleChangeCompetitor = this.handleChangeCompetitor.bind(this); this.state = { competitors: [], }; } handleChangeCompetitor(filterCompetitors) { this.setState(state => { const competitors = state.competitors.includes(filterCompetitors) ? competitors.filter(i => i !== filterCompetitors)//remove items : [ ...competitors, filterCompetitors ]; // add item return { competitors, }; }); } }

El problema es que no funciona y tengo este error:

 Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

¿Alguien tiene una idea de por qué no funciona o si el enfoque tiene algún sentido?