title: Fetch API work on POSTMAN and express server but does not work on React js
body: <p>I am trying to fetch API by using axios get method. This is the link <a href="http://open-api.myhelsinki.fi/v1/events/?language_filter=en" rel="nofollow noreferrer">http://open-api.myhelsinki.fi/v1/events/?language_filter=en</a>. </p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p><strong>This is my Express server setup</strong></p>
  
  <pre><code>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) =&gt; {
    axios
      .get("http://open-api.myhelsinki.fi/v1/events/?language_filter=en")
      .then(response =&gt; console.log(response))
      .catch(err =&gt; console.log(err));
  });
  
  app.listen(port, () =&gt; console.log(`Example app listening on port ${port}!`));
  </code></pre>
  
  <p><strong>Server's package.json file</strong></p>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>
  
  <p><strong>This is my React component.</strong></p>
  
  <pre><code>import React, { useEffect } from "react";
  import axios from "axios";
  
  const Events = () =&gt; {
    useEffect(() =&gt; {
      events();
    }, []);
    const [state, setstate] = React.useState([]);
    const events = () =&gt; {
      axios
        .get("http://localhost:5000/events")
        .then(res =&gt; res.json())
        .then(response =&gt; setstate(response.data))
        .catch(err =&gt; console.log(err));
    };
  
    return (
      &lt;div&gt;
        {state.map(list =&gt; {
          return &lt;li&gt;{list.id}&lt;/li&gt;;
        })}
      &lt;/div&gt;
    );
  };
  
  export default Events;
  </code></pre>
  
  <p><strong>This is React's package.json file. Ps. I have tried proxy settings in package.json but it did not work as well.</strong></p>
  
  <pre><code>{
    "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": [
        "&gt;0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }
  }
  </code></pre>