SyntaxError: Unexpected token < in JSON at position

Question

I'm trying to create drop down component in my react app. My react is as follows:

 componentDidMount() {
      let initialBrands = [];
      fetch('http://localhost:3000/brands').then((response) => {
      return response.json();
    })
    .then(data => {
      let brandFromApi = data.map(brand => { return {value: brand, display: brand} })
      this.setState({ brands: [{value: '', display: '(Select your favourite brand)'}].concat(brandFromApi) });
    }).catch(error => {
      console.log(error);
    });
}

But when compiling the page it gives the following error:

SyntaxError: Unexpected token < in JSON at position 0
    at App.js:82

I can't any other errors other than the above. However, my dropdown list is not populated. Anybody, please let me know where is the issue?

Answer 1

I suspect that you're receiving HTML (or XML ) back from the server, but you are trying to parse it as JSON which is resulting the error. Also Check the "Network" tab in Chrome dev tools to see contents of the server's response.

Try hitting the URL by browser or postman to check whether you really get a valid JSON response.