Having problems with Codepen, React and fetch()

JavaScript
1

Hi guys,
I’m trying to setup a codepen for the challenge “make a quote machine” but it doesn’t fetch the JSON while on my computer with vs code there is no problem.

Screenshot_2020-07-13 QWyBJvo
Screenshot_2020-07-13 QWyBJvo1907×949 84.8 KB

Can somebody tell me why?

I’m having a hard time with React, the quote machine wasn’t may be the best option to use react but it’s done. So I’m getting the JSON from the API, the click works just fine (I did this project both with a class and hooks) so now it’s time to make it good looking.
My idea is first to create a typing effect once the data is fetched, I already know how to do it with a function but I have no clue how to implement it with react. I already tried a bunch of things and nothing worked so far.

2

you need to show your code, your screenshot is not visible

3

you can click on it and it will open

4 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quote: {},
      trigger: false,
    };
    this.url = "http://quotes.stormconsultancy.co.uk/random.json";
  }

  componentDidMount() {
    this.fetchData();
  }
  componentWillUnmount() {
  }

  fetchData = () => {
    
    fetch(this.url)
      .then((response) => {
        response.json()
      })
      .then((result) => {
        this.setState({
          quote: result,
        })
      .catch((error) => {
        console.error(error)
        })
      });
  };
  render() {
    const author = this.state.quote.author;
    const quote = this.state.quote.quote;

    return (
      <div id="quote-box">
        <div className="quote-body">
          <blockquote id="text">{quote}</blockquote>
          <p id="author">{author}</p>
        </div>
        <div className="quote-footer">
          <a
            id="tweet-quote"
            title="tweet this!"
            target="_blank"
            rel="noopener noreferrer"
            href={this.url}
          >
            {/* <FaTwitter /> */}
          </a>
          <button id="new-quote" onClick={this.fetchData}>
            New quote
          </button>
        </div>
      </div>
    );
  }
}

Edit: So because I’m calling an unsecure API (http://), codepen doesn’t fetch the data.