Делаю приложение на React. Получаю массив объектов из api. Возникла проблема в фильтрации. Нужно сделать поиск по категории и цене. Цену вводим в инпуты. Не понимаю как сделать чтобы совместно с фильтрацией по категории можно было сделать фильтрацию по цене. Вот примерный вид массива, получаемого из api, который находится в state:
state = {
data: [],
category: 'all',
priceStart: '',
priceEnd: ''
}
data = [
{name: 'First Name', category: 'cat', price: '17262'},
{name: 'Second Name', category: 'bird', price: '7562'},
{name: 'Third Name', category: 'dog', price: '28412'},
]
Написал функцию, которая меняет состояния в зависимости от вводимых данных:
chFilter = (type, val) => {
switch(type) {
case 'category':
this.setState({ category: val });
break;
case 'priceStart':
this.setState({ priceStart: val });
break;
case 'priceEnd':
this.setState({ priceEnd: val });
break;
default:
break;
}
}
Куда дальше двигаться не понимаю. Сейчас работает фильтр по категории:
filter(items, filter){
switch(filter){
case 'all':
return items;
case 'auto':
return items.filter((e) => e.category === 'auto');
case 'immovable':
return items.filter((e) => e.category === 'immovable');
case 'cameras':
return items.filter((e) => e.category === 'cameras');
case 'laptops':
return items.filter((e) => e.category === 'laptops');
default:
return items;
}
}
Соответственно отображаем следующие данные:
const visible = this.filter(data, category)
<div className='category d-flex'>
<h5>По категории</h5>
<select
id = 'category'
value = {filter}
onChange = { (event) => chFilter('category', event.target.value) }>
{ option }
</select>
</div>
<div className="price-filter d-flex">
<div className="input-group ">
<h5>По цене</h5>
<input type="number" placeholder='с' value = { priceStart } onChange = { (event) => chFilter('priceStart', event.target.value) }/>
<input type="number" placeholder='до' value = { priceEnd } onChange = { (event) => chFilter('priceEnd', event.target.value) } />
<div className="input-group-append">
<button className="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
</div>
JSX
код?