Error Cannot read property 'setState' of undefined?

Question

JavaScript

There is an error Cannot read property 'setState' of undefined, but what's wrong?

export default class SearchBar extends React.Component{
    render(){
        return(
            <div className='searchBar'>
                <input
                    className='searchInput'
                    type='text'
                    placeholder='Look for...'
                    onChange={this.props.onSearch}
                />
            </div>
        );
    };
};

export default class HotelCard extends React.Component{
    render(){
        const {
            name,
            description,
            image
        } = this.props;

        return (
            <div className='col-md-4'>
                <div className='card'>
                    <div className='card-image'>
                        <img className='img-responsive' src={image}/>
                        <div className='shadow'><button className='btn btn-primary btn-round'>Подробнее</button></div>
                    </div>
                    <div className='card-content'>
                        <h5>{name}</h5>
                        <p>
                            {
                                description.length > MAX_DESCRIPTION_LENGTH ? description.substring(0, MAX_DESCRIPTION_LENGTH) + '...' : description
                            }
                        </p>
                        <button className='btn btn-accent'>Buy</button>
                    </div>
                </div>
            </div>
        );
    };
};

export default class App extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            displayedHotels: HOTELS
        };
    }

    handleSearch(e){
        const searchQuery = e.target.value.toLowerCase();

        const displayedHotels = HOTELS.filter(hotel => {
            const searchString = hotel.name.toLowerCase() + hotel.description.toLowerCase();

            return searchString.indexOf(searchQuery) !== -1;
        });

        this.setState({displayedHotels: displayedHotels});
    }

    render(){
        const hotelCards = this.state.displayedHotels.map(hotel =>
            <HotelCard
                image={hotel.image}
                name={hotel.name}
                description={hotel.description}
            />
        );

        return(

            <div>
                <div className='col-md-12'>
                    <SearchBar onSearch={this.handleSearch}/>
                </div>


                <div>
                    {hotelCards}
                </div>
            </div>

        );
    };
};

Answer 1

You can also write it in the App constructor.
The Open-Source libraries that I have seen use just such a method.
In general, I will give advice, if something does not work out for you, go to Google and write "reactjs + function that does not work + es6" There are already several resolved issues for your problem.