How to display data from express to react component?

Question

JSON

How can i map data from json ,express to react component?
server.js file:

const express = require('express');
const bodyParser = require('body-parser');
const server = express();
const port = process.env.PORT || 8080;
const cors = require('cors');
server.use(cors());
server.use(bodyParser.json());


server.get('/api/v1/startup', (req, res) => {
    res.sendDate(
        [{"startup_id":1,"startup_name":"Movies","startup_descr":"Wolf spider","startup_price":"$0.08"},
        {"startup_id":2,"startup_name":"Clothing","startup_descr":"Jabiru stork","startup_price":"$2.46"},
        {"startup_id":3,"startup_name":"Outdoors","startup_descr":"Fox, asian red","startup_price":"$4.06"},
        {"startup_id":4,"startup_name":"Outdoors","startup_descr":"Tapir, brazilian","startup_price":"$2.31"},
        {"startup_id":5,"startup_name":"Outdoors","startup_descr":"Blue wildebeest","startup_price":"$0.34"},
        {"startup_id":6,"startup_name":"Electronics","startup_descr":"Bushbuck","startup_price":"$7.35"},
        {"startup_id":7,"startup_name":"Beauty","startup_descr":"Red sheep","startup_price":"$6.67"},
        {"startup_id":8,"startup_name":"Tools","startup_descr":"Mocking cliffchat","startup_price":"$4.90"},
        {"startup_id":9,"startup_name":"Industrial","startup_descr":"Flamingo, chilean","startup_price":"$2.88"},
        {"startup_id":10,"startup_name":"Games","startup_descr":"Racer, blue","startup_price":"$8.71"},
        {"startup_id":11,"startup_name":"Baby","startup_descr":"Gecko, bent-toed","startup_price":"$2.92"}]
    )
});
server.listen(port);

in react component, I first import this json as data, use map to display data, but I get error: TypeError: Cannot read property 'prototype' of undefined

Answer 1

function App() {
  const [ startupData, setStartupData ] = React.useState([]);

  React.useEffect(() => {
    fetch('http://localhost:8080/api/v1/startup')
      .then(res => res.json())
      .then(data => setStartupData(data))
      .catch(err => console.error('Err: ', err));
  }, []);

  if (startupData?.length === 0) {
    return <h1>Loading...</h1>;
  }

  return (
    <div>
      <table border="2">
        <thead>
          <tr>
            <td>startup_id</td>
            <td>startup_name</td>
            <td>startup_descr</td>
            <td>startup_price</td>
          </tr>
        </thead>

        <tbody>
          {startupData?.map(startup => (
            <tr key={startup.startup_id}>
              <td>{startup.startup_id}</td>
              <td>{startup.startup_name}</td>
              <td>{startup.startup_descr}</td>
              <td>{startup.startup_price}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}