Filter Search in React, how to do 'nothing was found'

#react #javascript #beginners

Hi everyone! I'm sorry for my very poor english. :(

I have a problem creating a condition that would inform users that nothing was found. I have already tried by all means until I finally gave up and write to you asking for help.



import React, {Component} from "react";
import {Link} from "react-router-dom";

class SearchCars extends Component{

    const allCars = [
        {name: CarA, vin: exampleVin1},
        {name: CarB, vin: exampleVin2}
    ]

    state = {
        filterText: '',
        showSearch: false
    };

    handleSearch = e => {
        this.setState({
            filterText: e.target.value.toLowerCase()
        })
    };

    handleShowSearch = e => {
        this.setState({
            showSearch: !this.state.showSearch,
            filterText: ''
        })
    };

    render() {
        let table = [];
        let lastCategory = null;

        allCars.filter( el => {
            if (el.name.toLowerCase().indexOf(this.state.filterText) === -1){
                return null;
            }
            if (el.vin !== lastCategory){
                table.push(
                    <a className='search_items_links' onClick={()=> {this.handleShowSearch();}} key={el.vin} >
                        <div className='search_items'>{el.name}</div>
                    </a>
                )
            }

            lastCategory = el.vin;
        });

        let addClassSearch = this.state.filterText.length > 0 ? "search search_active" : "search";
        let toggleClassX = this.state.filterText.length > 0 ? "search_close search_close_active" : "search_close";

        if (this.state.showSearch === true){
            return (
                <>
                    <div className={addClassSearch}>
                        <input autoFocus
                               type='text'
                               placeholder='search'
                               value={this.state.filterText}
                               onChange={this.handleSearch}
                        />
                        <div onClick={this.handleShowSearch} className={toggleClassX}>
                            <img src='../images/close.png'/>
                        </div>
                        <div className='search_list'>
                            {
                                this.state.filterText.length === 1 && <a className='search_items_links'><div className='search_items'>Too short...</div></a> ||
                                this.state.filterText.length > 1 && table
                            }
                        </div>
                    </div>
                </>
            )
        } else{
            return (
                <div className='search_icon_display'>
                    <div className='search_zoom-icon'><img onClick={this.handleShowSearch}
                                                           onMouseEnter={this.hoverIcon}
                                                           onMouseOut={this.hoverIcon}
                                                           src={this.state.hoverIcon ? '../images/search-icon_hover.png' : '../images/search-icon.png'}/></div>
                </div>

            )
        }


    }
}