Положить в стейт фильтры - массив объектов, содержащих имя свойства, по которому выполняется фильтрация, текущее значение, массив значений, доступных для выбора:
filters: [
{ field: 'bg', value: '', options: [ 'black', 'white' ] },
{ field: 'color', value: '', options: [ 'red', 'green' ] },
],
На основе этого массива создать элементы фильтров:
filters.map((n, i) => (
<label>
{n.field}:
<select data-index={i} onChange={this.onChange}>
<option value="">none</option>
{n.options.map(n => <option>{n}</option>)}
</select>
</label>
))
onChange = e => {
const index = +e.target.dataset.index;
const value = e.target.value;
this.setState(prevState => ({
filters: prevState.filters.map((n, i) => index === i ? { ...n, value } : n)
}));
}
Получить отфильтрованные данные:
const filteredData = filters.reduce((acc, n) => {
return n.value
? acc.filter(m => m[n.field].includes(n.value))
: acc;
}, data);
Вместо полных данных отобразить отфильтрованные.