Random Quote Generator using React - Api not working

JavaScript
1

Tell us what’s happening:
Any react programmers can help me with this code?

I am trying to use an api call inside a react app and it is giving me an error message of “Failed to load resource: the server responded with a status of 522 ()”
“(index):1 Access to fetch at ‘https://crossorigin.me/http://www.stands4.com/services/v2/quotes.php?uid=7073&tokenid=akivxDtjkVeBtEZi&searchtype=RANDOM&format=JSON’ from origin ‘https://pbg4d.codesandbox.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.”
“(index):1 Uncaught (in promise) TypeError: Failed to fetch”

Your code so far

import React from "react";
import ReactDOM from "react-dom";

class Test extends React.Component {
  constructor() {
    super();
    this.state = {
      quote: {},
      author: ""
    };
  }

  componentDidMount() {
    fetch(
      "https://crossorigin.me/http://www.stands4.com/services/v2/quotes.php?uid=7073&tokenid=akivxDtjkVeBtEZi&searchtype=RANDOM&format=JSON"
    )
      .then(response => {
        if (response.ok) {
          response.json().then(json => {
            console.log(json);
          });
        }
      })
      .then(data => {
        console.log(data);
        this.setState({
          quote: data.result
        });
      });
  }

  render() {
    return (
      <div>
        <h1>Hello World</h1>
        {this.state.quote.quote}
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36.

2

You had a couple of issues. First I noticed there was a redirect to a slightly different domain and I noticed according to the API documentation that it should be format=json and not format=JSON (it is case-sensitive). You don’t even need the cross-origin.me proxy. Just use the following url:

https://www.abbreviations.com/services/v2/quotes.php?uid=7073&tokenid=akivxDtjkVeBtEZi&searchtype=RANDOM&format=json

Also, you will want to make sure you are returning a value in the first then. Also, you don’t need that extra then in the middle. The first then would be

      .then(response => {
        if (response.ok) {
          return response.json();
        }
      })

and your last then is fine.

3

Thank you so much! I got the api call to work in codesandbox but can’t seem to get it to work in codepen. Is there a way to use…

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

on codesandbox.io?