title: React app receiving promise instead of json object
body: <p>I am trying to query an API that should return a json object of books that match a user's query.</p>
  
  <p>The problem is what I am getting in the code is a promise rather than teh json object.</p>
  
  <p>In the Chrome dev tools I can see I am getting a 200 response from the server  with a Type of json and the object there is what I am expecting to receive.</p>
  
  <p>When I <code>console.log</code> the result of the query it comes up as a promise though.</p>
  
  <p>Pretty new to this but my understanding is that I should be getting a json object when <code>searchBook</code> is set with a query string in my <code>SearchBooks</code> component </p>
  
  <p><code>SearchBooks.js</code></p>
  
  <pre><code>import React, { Component } from 'react'
  import * as BooksAPI from './utils/BooksAPI'
  // import Book from './Book';
  
  export default class SearchBooks extends Component {
  
      state = {
          query: ''
      }
  
      updateQuery = (query) =&gt; {
          this.setState(() =&gt; ({
              query: query
          }))
      }
  
      clearQuery = () =&gt; {
          this.updateQuery('')
      }
  
      searchBook = (query) =&gt; {
          return BooksAPI.search(query)
      }
  
      searchFromQuery = () =&gt; {
          return this.state.query.split(' ').map((b) =&gt; (
              this.searchBook(b)
          ))
      }
  
      render() {
  
          const { query } = this.state
          // const { onUpdateShelf } = this.props
  
          const showingBooks = query === ''
          ? 'No results'
          : this.searchFromQuery()
  
          return(
              &lt;div className="search-books"&gt;
                  &lt;div className="search-books-bar"&gt;
                    &lt;a className="close-search" &gt;Close&lt;/a&gt;
                    &lt;div className="search-books-input-wrapper"&gt;
                      &lt;input
                          type="text"
                          placeholder="Search by title, author or subject"
                          value={query}
                          onChange={(event) =&gt; this.updateQuery(event.target.value)}
                      /&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="search-books-results"&gt;
                    &lt;ol className="books-grid"&gt;
                    {/* &lt;Book
                      key={book.id}
                      book={book}
                      updateShelf={onUpdateShelf} /&gt; */}
                    &lt;/ol&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p><code>API Request Function</code></p>
  
  <pre><code>export const search = (query) =&gt;
    fetch(`${api}/search`, {
      method: 'POST',
      headers: {
        ...headers,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ query })
    }).then(res =&gt; res.json())
      .then(data =&gt; data.books)
  </code></pre>
  
  <p><code>Result of console.log(this.searchFromQuery())</code></p>
  
  <pre><code>[Promise]
  0
  :
  Promise
  __proto__
  :
  Promise
  [[PromiseStatus]]
  :
  "resolved"
  [[PromiseValue]]
  :
  Array(20)
  length
  :
  1
  __proto__
  :
  Array(0)
  </code></pre>
  
  <p><code>Request/Response Headers</code></p>
  
  <pre><code>// Request
  POST /search HTTP/1.1
  Host: reactnd-books-api.xxxxx
  Connection: keep-alive
  Content-Length: 13
  Accept: application/json
  Origin: http://localhost:3000
  Authorization: 2nhixsfp
  User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36
  Content-Type: application/json
  Referer: http://localhost:3000/search
  Accept-Encoding: gzip, deflate, br
  Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
  
  // Response
  HTTP/1.1 200 OK
  X-Powered-By: Express
  Access-Control-Allow-Origin: *
  Content-Type: application/json; charset=utf-8
  ETag: W/"78c1-CfIO/Nda/QZYUxfCqeekUjLL3SU"
  Date: Wed, 23 May 2018 15:15:00 GMT
  Transfer-Encoding: chunked
  Content-Encoding: gzip
  X-Berlioz-Country: GB
  Access-Control-Allow-Headers: X-Berlioz-Country
  Access-Control-Expose-Headers: X-Berlioz-Country
  Strict-Transport-Security: max-age=300;
  
  Request URL: https://xxxx.com/search
  Request Method: POST
  Status Code: 200 OK
  Remote Address: xxxxx
  Referrer Policy: no-referrer-when-downgrade
  Access-Control-Allow-Headers: X-Berlioz-Country
  Access-Control-Allow-Origin: *
  Access-Control-Expose-Headers: X-Berlioz-Country
  Content-Encoding: gzip
  Content-Type: application/json; charset=utf-8
  Date: Wed, 23 May 2018 15:15:00 GMT
  ETag: W/"78c1-CfIO/Nda/QZYUxfCqeekUjLL3SU"
  Strict-Transport-Security: max-age=300;
  Transfer-Encoding: chunked
  X-Berlioz-Country: GB
  X-Powered-By: Express
  Accept: application/json
  Accept-Encoding: gzip, deflate, br
  Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
  Authorization: 2nhixsfp
  Connection: keep-alive
  Content-Length: 13
  Content-Type: application/json
  Host: reactnd-books-api.udacity.com
  Origin: http://localhost:3000
  Referer: http://localhost:3000/search
  User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36
  {query: "p"}
  query
  :
  "p"
  </code></pre>