Fetch API work on POSTMAN and express server but does not work on React js

Question

I am trying to fetch API by using axios get method. This is the link http://open-api.myhelsinki.fi/v1/events/?language_filter=en.

My backend is Node js with Express and frontend is React js. It's working fine when I run in Postman and also Express server (It shows the data). But When I render it in React component, it does not show anything.

When I checked the React component's network status, it shows pending. I don't know, What I am doing wrong since I don't get any error.

This is my Express server setup

const express = require("express");
const app = express();
const port = process.env.PORT || 5000;
const cors = require("cors");
const axios = require("axios");
app.use(cors());

app.get("/events", async (req, res, next) => {
  axios
    .get("http://open-api.myhelsinki.fi/v1/events/?language_filter=en")
    .then(response => console.log(response))
    .catch(err => console.log(err));
});

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

Server's package.json file

{
  "name": "myhelsinki",
  "version": "1.0.0",
  "description": "This is for educational purpose",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "server": "node server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "author": "alak",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.19.1",
    "concurrently": "^5.0.2",
    "cors": "^2.8.5",
    "express": "^4.17.1"
  }
}

This is my React component.

import React, { useEffect } from "react";
import axios from "axios";

const Events = () => {
  useEffect(() => {
    events();
  }, []);
  const [state, setstate] = React.useState([]);
  const events = () => {
    axios
      .get("http://localhost:5000/events")
      .then(res => res.json())
      .then(response => setstate(response.data))
      .catch(err => console.log(err));
  };

  return (
    <div>
      {state.map(list => {
        return <li>{list.id}</li>;
      })}
    </div>
  );
};

export default Events;

This is React's package.json file. Ps. I have tried proxy settings in package.json but it did not work as well.

{
  "name": "myhelsinki",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Hi @Jayce444 fixed my backend problem. I did not send the response to the front end. But I am facing new problem in react frontend where its says "GET localhost:5000/events 500 (Internal Server Error)". — dam
– dam, Commented Jan 21, 2020 at 5:17
do console.log() in your backend as well.So,it will help you to figure out what happen here catch(err => { console.log(err) return res.status(500).send(err)} ); — Prakash Karena
– Prakash Karena, Commented Jan 21, 2020 at 5:18
Back end status is 200 ok. I did not get any error. I think I am getting error from React settings. But don't know what I am doing wrong. — dam
– dam, Commented Jan 21, 2020 at 5:36

Jayce444 · Accepted Answer · 2020-01-21 04:21:15Z

1

Well you're not sending the response from the back end to the front end, you're just printing it. You need to actually return the response to the front end, like this:

app.get("/events", async (req, res, next) => {
  axios
    .get("http://open-api.myhelsinki.fi/v1/events/?language_filter=en")
    .then(response => res.send(response))
    .catch(err => res.status(500).send(err));
});

answered Jan 21, 2020 at 4:21

Jayce444

9,1234 gold badges35 silver badges47 bronze badges

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

1 Comment

Jayce444 Over a year ago

@dam well if you're getting a 500 that means the .catch in the /events route is triggering. Print out that error and see what the reason is for it failing.

Prakash Karena · Accepted Answer · 2020-01-21 07:24:54Z

0

import React, { useEffect , useState } from "react";
import axios from "axios";

const Events = () => {

 const [events, setEvents] = useState([]);

  useEffect(() => {
    fetchingData();
  }, []);

  const fetchingData = () => {
    axios
      .get("http://localhost:5000/events")
      .then(response => {

         console.log('response',response.data)

         setEvents(response.data.data)
       }) // you have array in your response.data so add your data here
      .catch(err => console.log(err));
  };

//do console.log
 console.log('events',events)

  return (
    <div>
      {events.map(list => {
        return <li>{list.id}</li>;
      })}
    </div>
  );
};

export default Events;

edited Jan 21, 2020 at 7:24

answered Jan 21, 2020 at 6:47

Prakash Karena

2,6031 gold badge9 silver badges18 bronze badges

1 Comment

Samuel Liew Over a year ago

Comments are not for extended discussion; this conversation has been moved to chat.

Collectives™ on Stack Overflow

Fetch API work on POSTMAN and express server but does not work on React js

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related