React not reading json returned from flask GET endpoint

Question

I'm trying to fetch data returned from url. Curl to the url results in following:

[{"name": "Hello World!"}]

Following is the code in my App.js


import React, { Component } from 'react';
import Contacts from './components/contacts';


class App extends Component {
  render() {
    return (
      <Contacts contacts={this.state.contacts} />
  )
  }
  state = {
    contacts: []
  };

  componentDidMount() {
    fetch('url')
    .then(res => res.json())
    .then((data) => {
      this.setState({ contacts: data })
    })
    .catch(console.log)
  }

}

export default App;

My contact.js contains the following:

// src/components/contacts.js

import React from 'react'

const Contacts = ({ contacts }) => {
    return (
    <div>
        <center><h1>Contact List</h1></center>
        {contacts.map((contact) => (
        <div class="card">
            <div class="card-body">
            <h5 class="card-title">{contact.name}</h5>
            </div>
        </div>
        ))}
    </div>
    )
};

export default Contacts

The data does not get rendered or logged. Is there an issue in the way I'm fetching it?

EDIT: The issue is related to CORS. Not sure why using flask_cors doesn't resolve it. My server looks like:

from flask import Flask, request, json
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'

@app.route("/")
def home():
    return json_response([{"name":"Hello World!"}])

def json_response(payload, status=200):
     return (json.dumps(payload), status, {'content-type': 'application/json'})

data does not get displayed on the webpage. It should show "Hello World" — Srishti Rawal
– Srishti Rawal, Commented Dec 8, 2019 at 4:01
can you post the pic of network tab.. the response headers and the preview tab with it ? — Panther
– Panther, Commented Dec 8, 2019 at 4:37

akhtarvahid · Accepted Answer · 2019-12-08 04:49:45Z

1

You can check this example of your code with dummy api and your code is working fine.

the only thing is different api

    class App extends React.Component {
      state = {
        contacts: []
      };
      render() {
        return (
          <Contacts contacts={this.state.contacts} />
      )
      }
      componentDidMount() {
        fetch(`https://cors-anywhere.herokuapp.com/http://35.222.96.248:5000/`)
        .then(res => res.json())
        .then(data => {
        this.setState({ contacts: data });
      })
      .catch(console.log);
  }
    }
    const Contacts = ({ contacts }) => {
        return (
        <div>
            <center><h1>Contact List</h1></center>
            {contacts.map((contact) => (
            <div class="card">
                <div class="card-body">
                <h5 class="card-title">{contact.title}</h5>
                </div>
            </div>
            ))}
        </div>
        )
    };

Live Demo

edited Dec 8, 2019 at 4:49

answered Dec 8, 2019 at 4:04

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

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

17 Comments

Srishti Rawal Over a year ago

I followed the same. This works, but if I change the url to the one I want it doen't work. Is there any issue with the response from my url? I have included it in my post

akhtarvahid Over a year ago

@SrishtiRawal there is no problem with your frontend. the problem is in your api, check that

Srishti Rawal Over a year ago

I used curl to check the response from the api, it seems correct

akhtarvahid Over a year ago

@SrishtiRawal i already showed you about your frontend code that your code is fine. you need to debug/test your api from postman or something else

Srishti Rawal Over a year ago

Postman returns this: [ { "name": "Hello World!" } ]

|

Collectives™ on Stack Overflow

React not reading json returned from flask GET endpoint

1 Answer 1

17 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Related