So it's actually a new question, cause my previouse one wasn't too clear and I had to delete it. I have a function which takes an api data from parent function, and changes div contains to this api data.

Parent function:

function searchBook(query){
    const url = BASE_URL + `${query}` + '&' + API_KEY;

    fetch(url)
    .then(res => res.json())
    .then(books =>{
        console.log(books);
    })
    .then(books => showBooks(books.results));

So it fetches an api and prints it in console in promise. But in the next promise I want to invoke a function which shows books on the page by adding them to divs:

showBooks = books =>{
    const main = document.getElementById('book_container');
    main.innerHTML = "";
    books.forEach(book => {
        const bookEl = document.createElement('div');
        bookEl.classList.add('book');

        bookEl.innerHTML = `
        <div class="book">
        <div class="border"></div>
            <img src="img/cover.jpg">
    <div class="book_info">
            <h3>${book.title}</h3>
            <p>${book.authors}</p>
    </div>
    <div class="overview">
            <p>${book.description}</p>
    </div>
</div>
        `

        main.appendChild(bookEl);
    });
}
}

It should get books data from searchBooks function through '.then' promise, but for some reason it returns the next error:

So when i remove results from showBooks(books.results), it returns the next error:

For some reason data is undefined, though it's passed through promise, so I'm not sure what could be the reason. I've searched the same approach on the internet, and it seems to work fine, but in my app it doesn't work. It prints data in console, so data is passed after all, but for some reason it doesn't work in the showBooks function.