CODEWITHSUNDEEP
reactjs
Devologist
Devologist

Reputation: 55

.then promise not compiling fetch api

Hey all I am doing a pretty simple React Application project however my compiler keeps telling me that .then is an unexpected token. I have installed the fetch api with npm install fetch --save. And it is listed as a dependency within my package.json file.

Am I doing something wrong with my code? Or do I have to install an npm package to use the .then method. Heres my code

import React from 'react';
import {FormGroup, FormControl, InputGroup, Glyphicon} from 'react-bootstrap';

class Global extends React.Component {
  constructor(props) {
    super(props)
    this.state = {query: ''};
  }
  search() {
    const BASE_URL = 'https://www.googleapis.com/books/v1/volumes?q=';
    fetch(`${BASE_URL}${this.state.query}`, {method: 'GET'});
    .then(response => response.json());
    .then(json => console.log(json))
    console.log('search', this.state.query)
  }

  render() {
    return(
     <div className="global">
       <h2> Book Explorer!</h2>
       <FormGroup>
         <InputGroup>
         <FormControl type="text" placeholder="search for a book" onChange={event => this.setState({query: event.target.value})} onKeyPress={event => {
           if(event.key === 'Enter') {
             this.search();
           }
           }}/>
         <InputGroup.Addon onClick={() => this.search()}>
         <Glyphicon glyph="search"></Glyphicon>
        </InputGroup.Addon>
        </InputGroup>
        </FormGroup>
      </div>
    )
  }
}

export default Global;

Here is also my dependencies within package.json

  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "jquery": "^2.2.1",
    "jsdom": "^8.1.0",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^0.14.7",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "babel-preset-stage-1": "^6.1.18",
    "fetch": "^1.1.0",
    "lodash": "^3.10.1",
    "react": "^0.14.3",
    "react-bootstrap": "^0.31.1",
    "react-dom": "^0.14.3",
    "react-redux": "4.3.0",
    "react-router": "^2.0.1",
    "redux": "^3.0.4"

Upvotes: 1

Views: 41

Answers (1)

Umesh
Umesh

Reputation: 2732

You should not end the statements by placing ';'. Promise should be chained in a single statement:

const BASE_URL = 'https://www.googleapis.com/books/v1/volumes?q=';

    fetch(`${BASE_URL}${this.state.query}`, {method: 'GET'})
    .then(response => response.json())
    .then(json => console.log(json));

    console.log('search', this.state.query)

Upvotes: 1

Related Questions