title: Cant render API data, .map error using Google Books API
body: <p>Pretty new to React, still learning. I was trying to make this Book Finder app using Google Books API, and then when I wanted to map the data, first time everything worked perfectly, but after that one time I started getting this error:</p>
  <p><a href="https://i.stack.imgur.com/T1hIQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T1hIQ.png" alt="Error" /></a></p>
  <p>Keep in mind that the first time I ran the code everything worked, I was even fixing some CSS properties and it re-rendered fine.
  I tried a lot of things, I do know that you can't use .map on objects, and I checked, the API data was and object.</p>
  <p>Result of typeof() for the given API data
  <a href="https://i.stack.imgur.com/DF5fd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DF5fd.png" alt="Result of typeof() for the given API data" /></a></p>
  <p>Heres the code:</p>
  <p>MainContainer.tsx</p>
  <pre class="lang-js prettyprint-override"><code>import { useState } from &quot;react&quot;;
  import List from &quot;./List&quot;;
  import Search from &quot;./Search&quot;;
  import request from &quot;superagent&quot;;
  
  export default function MainContainer() {
  
      const [books, setBooks] = useState([]);
  
      function handleChange(e: any) {
          setBooks(e.target.value);
      }
  
      function handleSearch(e: any) {
          e.preventDefault();
          request
              .get(&quot;https://www.googleapis.com/books/v1/volumes&quot;)
              .query({ q: setBooks })
              .then((data) =&gt; {
                  setBooks([...books])
              })
      }
  
      return (
          &lt;div className=&quot;main-container&quot;&gt;
              &lt;Search
                  handleChange={handleChange}
                  handleSearch={handleSearch}
              /&gt;
              &lt;List books={books}/&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>List.tsx</p>
  <pre class="lang-js prettyprint-override"><code>import Card from &quot;./Card&quot;
  
  export default function List(props: any) {
  
      return (
          &lt;div className=&quot;list-container&quot;&gt;
  
              {
  
                  props.books &amp;&amp; props.books.length &gt; 0 ?
                      props.books.map(function (book: any) {
                          return (
                              &lt;Card
                                  key={book.id}
                                  image={book.volumeInfo.imageLinks.smallThumbnail}
                                  title={book.volumeInfo.title}
                                  author={book.volumeInfo.authors}
                                  published={book.volumeInfo.publishedDate}
                              /&gt;
                          )
                      }) : &lt;p className=&quot;np-data&quot;&gt;No books yet...&lt;/p&gt;
              }
  
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>Card.tsx</p>
  <pre class="lang-js prettyprint-override"><code>export default function Card(props: any) {
      return (
          &lt;div className=&quot;card&quot;&gt;
  
              &lt;img src={props.image} alt=&quot;&quot; /&gt;
              &lt;div className=&quot;card-desc&quot;&gt;
  
                  &lt;h3 className=&quot;title&quot;&gt;{props.title}&lt;/h3&gt;
                  &lt;h4 className=&quot;author&quot;&gt;{props.author}&lt;/h4&gt;
                  &lt;p className=&quot;published&quot;&gt;{props.published}&lt;/p&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>Again, I'm still learning React, this might be some dumb-typo-begginer error so yeah. Thanks in advance!</p>