React app receiving promise instead of json object - json

Question

I am trying to query an API that should return a json object of books that match a user's query.
The problem is what I am getting in the code is a promise rather than teh json object.
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.
When I console.log the result of the query it comes up as a promise though.
Pretty new to this but my understanding is that I should be getting a json object when searchBook is set with a query string in my SearchBooks component
SearchBooks.js
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) => {
this.setState(() => ({
query: query
}))
}
clearQuery = () => {
this.updateQuery('')
}
searchBook = (query) => {
return BooksAPI.search(query)
}
searchFromQuery = () => {
return this.state.query.split(' ').map((b) => (
this.searchBook(b)
))
}
render() {
const { query } = this.state
// const { onUpdateShelf } = this.props
const showingBooks = query === ''
? 'No results'
: this.searchFromQuery()
return(
<div className="search-books">
<div className="search-books-bar">
<a className="close-search" >Close</a>
<div className="search-books-input-wrapper">
<input
type="text"
placeholder="Search by title, author or subject"
value={query}
onChange={(event) => this.updateQuery(event.target.value)}
/>
</div>
</div>
<div className="search-books-results">
<ol className="books-grid">
{/* <Book
key={book.id}
book={book}
updateShelf={onUpdateShelf} /> */}
</ol>
</div>
</div>
)
}
}
API Request Function
export const search = (query) =>
fetch(`${api}/search`, {
method: 'POST',
headers: {
...headers,
'Content-Type': 'application/json'
},
body: JSON.stringify({ query })
}).then(res => res.json())
.then(data => data.books)
Result of console.log(this.searchFromQuery())
[Promise]
0
:
Promise
__proto__
:
Promise
[[PromiseStatus]]
:
"resolved"
[[PromiseValue]]
:
Array(20)
length
:
1
__proto__
:
Array(0)
Request/Response Headers
// 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"

Answer 1

Calling res.json() on a response from fetch returns a promise that resolves to the body of the request in JSON format. What you should do is setting some state with the data coming from the request. You can do it this way:
export default class SearchBooks extends Component {
state = {
query: '',
books: []
}
updateQuery = (query) => {
this.setState(() => ({
query: query
}))
}
clearQuery = () => {
this.updateQuery('')
}
searchBook = (query) => {
// Instead of returning the promise, you add the response data to the state
BooksAPI.search(query)
.then(books => this.setState(prevState => ({ books: prevState.books.concat(books)})));
}
render() {
const { query } = this.state
// const { onUpdateShelf } = this.props
const showingBooks = query === ''
? 'No results'
: this.searchBook(query)
return(
<div className="search-books">
<div className="search-books-bar">
<a className="close-search" >Close</a>
<div className="search-books-input-wrapper">
<input
type="text"
placeholder="Search by title, author or subject"
value={query}
onChange={(event) => this.updateQuery(event.target.value)}
/>
</div>
</div>
<div className="search-books-results">
<ol className="books-grid">
{this.state.books.map(book => <Book key{book.id} book={book} updateShelf={onUpdateShelf} />)}
</ol>
</div>
</div>
)
}
}
This is the general idea, just take the value from the promise and set it to the state. You can expand on this as needed.