placeholderUseEffect.js

useEffect(() => {
  fetch("https://www.googleapis.com/books/v1/volumes/?maxResults=30&q=danbrown")
    .then(response => response.json())
    .then(responseJson => {
      const { items } = responseJson;

      const booksList = items.map(book => {
        const {
          volumeInfo: { title, authors, imageLinks },
          id: bookId
        } = book;

        return {
          bookId,
          thumbnail: imageLinks
            ? imageLinks.thumbnail
            : "https://i.ibb.co/YLC0nQQ/not-found.png",
          title,
          authors: authors ? authors.toString().replace(/,/g, ", ") : "-"
        };
      });

      setBooks(booksList);
      setDataFetched(true);
    })
    .catch(error => {
      console.error(error);
    });
}, []);