Why am I not getting data using fetch() API?

JavaScript
1

Help!!
I am re-doing the “random quote generator” challenge. Previously I used Jquery Ajax call and it worked pretty fine. Now I am doing the same stuff using React and fetch api, but I am not getting any data back while console.log() the return value. Can you guys check if I am doing anything wrong? I will appreciate if you can help me receive the data object from the endpoint. Thanks.

Here’s the code:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      quotes: {}
    };
  }

  componentDidMount() {
    fetch('https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en', { mode: 'no-cors'})
    .then(function(res){
      return res.json();
    })
    .then(function(data){
      this.setState({quotes: data });
    })
  }

  render() {
    console.log(this.state.quotes);
    return (
      <div>
        <Hello/>
        
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));
2

This is due to CORS error. You might need some sort of API key or just use any other API which doesn’t have such restrictions.

1 Like
3

Thanks. I too figured out about CORS while searching for the solution online. I have to find another api service. :frowning: