Creating a table in React from JSON inputed from Flask

Question

I am trying to make a table in React from the response I've got from my flask app. The code I am using is below. Please could someone help me? I am unsure as to where to start and how to do it.

import React, { Component } from "react";
import { render } from "react-dom";
import axios from "axios";

class Data extends Component {
    constructor() {
    super();
    this.state = {
        products: ""
    };
}
componentDidMount() {
    this.getDataAxios();
}

async getDataAxios() {
    const response = await axios.get("http://141.123.1:5000/product");
    this.setState({ products: response.data });
}

render() {
    return (
        <div>
            <h1>response data</h1>
        </div>
    );
    }
}
export default Data;

and the input from the local server is:

"products": [
      {
        "action": "update",
        "id": 2,
        "object_identifier": 20,
        "object_type": "meal",
        "s3_location": "location-110"
      },
      {
        "action": "update",
        "id": 3,
        "object_identifier": 20,
        "object_type": "meal",
        "s3_location": "location-120"
      },
      {
        "action": "update",
        "id": 4,
        "object_identifier": 60,
        "object_type": "meal",
        "s3_location": "location-1120"
      },
      {
        "action": "update",
        "id": 5,
        "object_identifier": 70,
        "object_type": "meal",
        "s3_location": "location-1323120"
      }
]

as an extra and rather cheeky question, I am unsure right now how to get my flask rest api to work without using Moesif CORS. Does anyone know a way?

Thank you so much for the help as always.

//A

Answer 1

Map the data if it exists

render() {
    return (
        <div>
            <h1>response data</h1>
            {this.state.products && this.state.products.length > 0 && this.state.products.map(product => <Product {...product} />)}
        </div>
    );
    }
}

Make a Product component that renders 1 product and put it in here. Then fill it with data you get from each iteration of the array.