Q: React project - search page is no rendering search results from the API I am making a project in which I must get result from API. 
And I have a problem because when the result of my query is empty, then the error is occur: 
`Book.js:10 Uncaught (in promise) TypeError: Cannot read property 'thumbnail' of undefined'
This is my code in component with search:
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import escapeRegExp from 'escape-string-regexp'
import Book from './Book'
import * as BooksAPI from './BooksAPI'
class SearchView extends Component {
    state = {
        query: '',
        books: [],
        filteredBooks: []
    }
    updateQuery = (query) => {
        this.setState({query})
            if(query){
                BooksAPI.search(query).then((books) => { 
                    if(books instanceof Array)  {
                        //add books to state
                        this.setState({books})
                        //filter array
                        const match = new RegExp(escapeRegExp(query))
                        const filteredBooks = this.state.books.filter((book) => match.test(book.title) || match.test(book.title))
                        this.setState({books: filteredBooks})
                    }
                    else {
                        //set book state to empty array
                        this.setState({books: []})
                    }
                }
            )
        }    
    }    
    render() {        
        const {onChangeCategory} = this.props
        const {query, books} = this.state        
        return (
            <div>
            <div className="search-books-bar">
                <Link className="close-search" to="/">Close</Link>
                <form>
                    <div className="search-books-input-wrapper">
                        <input type='text' placeholder='Search books by title or author' value={query} onChange={(event) => this.updateQuery(event.target.value)} />
                    </div>
                </form>
            </div>
           {books.length!==0 && (
                <div className="search-books-results">
                    <div className="search-books">
                        <ol className="books-grid">
                            {books.map((book) => (  
                                <li key={book.id}>
                                    <Book
                                        onChangeCategory={onChangeCategory}
                                        book = {book}
                                    />
                                </li>
                            ))}
                        </ol>
                    </div>
                </div>
               )}
               {(books.length===0 && query.length!==0) && (
               <div className="search-results">
                    {`No book found`}
                </div>
               )}
            </div> 
        )
    }    
}
export default SearchView

Maybe some of you can give me a prompt what I must add or change in this code to fix this problem ...
Here is link to repository with this project: enter link description here
Thanks for any answer :)

A: You can even do something like this also:
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${(this.props.book.imageLinks.thumbnail) ? this.props.book.imageLinks.thumbnail : ""})`}}></div>

