Фильтр по состоянию на React

Всем добра! Делаю фильтр на реакте, получаю из инпутов значения - категория, метро, тип и данные из строки поиска. Не получается отфильтровать по всем 4 параметрам. Буду рад советам :)

import OneItem from "../OneItem/OneItem";
import React, { Component } from 'react';
import logo from '../logo.svg';
import '../App/App.css';
import  "./ListScript";


const ITEMS = [
    {
        id: 1,
        what: 0,
        type: "Банковская карта",
        metro: "Московская",
        date: '2017-11-10',
        title: "Потеряна карта сбербанка",
        description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, vel.",
        phone: "834554234",
        name: "Вася"
    },
    {
        id: 2,
        what: 0,
        type: "Телефон",
        metro: "Ленинский пр",
        date: '2017-12-16',
        title: "Потерян телефон",
        description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, vel.",
        phone: "654234",
        name: "Катя"
    },
    {
        id: 3,
        what: 1,
        type: "Документы",
        metro: "Звездная",
        date: '2017-4-19',
        title: "Нашел документы",
        description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, vel.  amet, consectetur adipisicing elit. In, vel",
        phone: "89432854234",
        name: "Игнат"
    },
    {
        id: 4,
        what: 1,
        type: "Самовар",
        metro: "Парк победы",
        date: '2017-10-21',
        title: "Самовар",
        description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, vel.",
        phone: "84454234",
        name: "Лариса Паллна"
    },
    {
        id: 5,
        what: 1,
        type: "Кот",
        metro: "Озерки",
        date: '2017-1-11',
        title: "Кошка",
        description: "Нашел кошку, верну за 300 руб или поменяю на ВАЗ 21099",
        phone: "8943254234",
        name: "Магомед"
    },
    {
        id: 6,
        what: 1,
        type: "Деньги",
        metro: "Московская",
        date: '2017-9-15',
        title: "Нашел 100 рублей",
        description: "Нашел 100 рублей одной купюрой, верну по описанию за вознаграждение!",
        phone: "8943254234",
        name: "Иван"
    },
    {
        id: 7,
        what: 1,
        type: "Банковская карта",
        metro: "Ладожская",
        date: '2017-1-10',
        title: "Нашел кредитку",
        description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, vel.",
        phone: "8943254234",
        name: "Елизавет Макарыч"
    },
    {
        id: 8,
        what: 1,
        type: "Компьютер",
        metro: "Ладожская",
        date: '2017-3-8',
        title: "Нашел iMac",
        description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, vel.",
        phone: "896454234",
        name: "Чарли"
    }

];
const metroName = ['Метро','Московская', 'Звездная', 'Купчино', 'Парк Победы'];
const category = ['Категории', 'Телефон', 'Фотоаппараты', 'Банковская карта', 'Самовар', 'Люди'];
const defaultMetro = 'Метро';
const defaultCategory = 'Категории';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {
            displayItems: ITEMS,
            displayMetro: ITEMS,
            displayCategory: ITEMS,
            displayDate:ITEMS,
            displaySearch:ITEMS,
            display: ITEMS
        };
        this.searchFilter = this.searchFilter.bind(this);
        this.metroSearch = this.metroSearch.bind(this);
        this.categorySearch = this.categorySearch.bind(this);
        this.btnFind = this.btnFind.bind(this);
        this.btnLoss = this.btnLoss.bind(this);
    }


    btnFind() {
        const displayItems = this.state.displayItems.filter(item => {
            const searchString = item.what;
            return searchString.valueOf() == 1;
        });
        if(displayItems != this.state.displayItems) {
            this.setState({
                displayItems: displayItems
            });
        }
    }
    btnLoss() {
        const displayItems = this.state.displayItems.filter(item => {
            const searchString = item.what;
            return searchString.valueOf() == 0;
        });
        if(displayItems != this.state.displayItems) {
            this.setState({
                displayItems: displayItems
            });
        }
    }

    categorySearch(e) {
        const searchQuery = e.target.value;
        const displayCategory = this.state.displayItems.filter(item => {
            const searchString = item.type;
            return searchString.indexOf(searchQuery) === 0;
        });
        if(searchQuery == defaultCategory) {
            this.setState({
                displayCategory: ITEMS
            });
        } else {
            this.setState({
                displayItems: displayCategory
            });
        }
    }

    metroSearch(e) {
        const searchQuery = e.target.value;
        const displayMetro = this.state.displayItems.filter(item => {
            const searchString = item.metro;
            return searchString.indexOf(searchQuery) === 0;
        });
        if(searchQuery == defaultMetro) {
            this.setState({
                displayMetro: ITEMS
            });
        } else {
            this.setState({
                displayItems: displayMetro
            });
        }

    }
    searchFilter(e)
    {
        const searchQuery = e.target.value.toLowerCase();
        const displaySearch = this.state.displayItems.filter(item => {
            const searchString = item.title.toLowerCase() + item.description.toLowerCase();
            return searchString.indexOf(searchQuery) === 0;
        });

        this.setState({
            displayItems: displaySearch
        });
    }

    dateSearch(e) {
        const searchQuery = e.target.value;
        const displayDate = this.state.displayItems.filter(item => {
            const searchString = item.date;
            return searchString.indexOf(searchQuery) === 0;
        });
        this.setState ({
            displayDate: displayDate
        });
    }


    render() {
        return (
            <div>
                <div className="row filter">
                    <nav className="navbar navbar-expand-lg  filter-find m-auto">

                        <div className="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul className="navbar-nav ">
                                <li className="nav-item active">
                                    <div>
                                        <a href="#" className="filter-find-pass" id="btnFind" onClick={this.btnFind}>Находки</a>
                                        <a href="#" className="filter-loss-pass" id="btnLoss" onClick={this.btnLoss}>Пропажи</a>
                                    </div>
                                </li>
                                <li className="nav-item filter-category">
                                    <select name="Категория" id="category" onChange={this.categorySearch}>
                                        {category.map(item =>  <option value={item} name="category">{item}</option>)}
                                    </select>
                                </li>
                                <li className="nav-item filter-metro">
                                    <select name="Метро " id="metro" onChange={this.metroSearch}  >
                                        {metroName.map(item => <option value={item} name="metro">{item}</option>)}
                                    </select>
                                </li>
                                <li className="nav-item filter-date">
                                    <input type="date" className="form-control" id="date" name="date" placeholder="Дата"
                                           onChange={this.dateSearch}/>
                                </li>
                                {/*<li className="nav-item filter-search">*/}
                                {/*<i className="fa fa-search" aria-hidden="true"  data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"></i>*/}
                                {/*</li>*/}
                            </ul>
                        </div>
                    </nav>
                </div>
                <div className="  search-input"  id="collapseExample">
                    <input type="text" placeholder="Напишите сюда что вы хотите найти" id="search" onChange={this.searchFilter}/>
                </div>
                <div className="list">
                    {this.state.displayItems.map( item =>
                        <OneItem
                            key = {item.id}
                            what = {item.what}
                            type = {item.type}
                            metro = {item.metro }
                            date = {item.date}
                            title = {item.title}
                            description = {item.description}
                            phone = {item.phone}
                            name = {item.name}
                        />
                    )}
                </div>
            </div>
        );
    }

}

export default List;