Fetch not working in React.js

Question

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.

kuiro5 · Accepted Answer · 2018-07-02 14:30:56Z

2

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.

edited Jul 2, 2018 at 14:30

answered Jul 1, 2018 at 5:47

kuiro5

1,6011 gold badge12 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kuiro5 Over a year ago

The API response is shaped like this: { a: 'hello world' }, so you need to reference the a key in order to access 'hello world': jsfiddle.net/n5u2wwjg/71686.

Abhishek Prakash Over a year ago

@kuiro5 You missed = in between const { a } and result

Nallamachu Over a year ago

the same logic is not working when I point to local spring boot project with the URL of localhost:8181/api/hello Let me know if any other options we have?

Collectives™ on Stack Overflow

Fetch not working in React.js

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related