CODEWITHSUNDEEP
reactjs
Daniel
Daniel

Reputation: 129

Fetch not working in React.js

I am trying to fetch the message outputted by the following endpoint:

http://helloworld-env-2.5fwknpgms8.us-east-2.elasticbeanstalk.com/

I just ran a create-react-app to create my application and changed the code in the App.js file

New Code:

import React, { Component } from 'react';
import './App.css';

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
       error: null,
       isLoaded: false,
       items: ""
    };
  }

  componentDidMount(){
    console.log("mounting component");
    fetch("http://helloworld-env-2.5fwknpgms8.us-east-2.elasticbeanstalk.com/")
    .then((result) => {
      this.setState({
        isLoaded: true,
        items: result
      });
    });
  }

  render() {
    console.log("rendering");
    const isLoaded = this.state.isLoaded;
    if(isLoaded){
      return (<div> {this.state.items} </div>);
    }
    else{
    return (
      <div>loading</div>
    );
    }
  }
}

export default App;

I keep getting the loading message.

Upvotes: 0

Views: 2404

Answers (1)

kuiro5
kuiro5

Reputation: 1581

You need to parse the response from fetch:

  componentDidMount(){
    fetch("http://helloworld-env-2.5fwknpgms8.us-east-2.elasticbeanstalk.com/")
    .then((result) => result.json()) // here
    .then((result) => {
      const { a } = result; // access 'a' key from response
      this.setState({
        isLoaded: true,
        items: a
      });
    });
  }

Here are the docs.

Upvotes: 2

Related Questions