[SIMPLE WAY]-HOW TO DISPLAY ARRAY DATA INTO TABLES IN REACTJS

import React from 'react';

class Employeelist extends React.Component {
    render() {
        var employeeslist = [
            {
                "Id": 1,
                "EmployeeName": "Jimmy",
                "EmployeeSalary": "$3200",
                "Adress": "Amsterdam, Netherlands"
            },
            {
                "Id": 3,
                "EmployeeName": "Mark",
                "EmployeeSalary": "$2000",
                "Adress": "France, Paris"
            },
            {
                "Id": 1005,
                "EmployeeName": "Johny",
                "EmployeeSalary": "$2500",
                "Adress": "Usa,New York"
            },
            {
                "Id": 1007,
                "EmployeeName": "Alex",
                "EmployeeSalary": "$3000",
                "Adress": "Usa,New York"
            }
        ];
        debugger;
        if (employeeslist && employeeslist.length > 0) {
            return (<div>
                <h2>Employees List</h2>
                <table className="table" >
                    <thead>
                        <tr>
                            <th>Employee Id</th>
                            <th>Name</th>
                            <th>Salary</th>
                            <th>Address</th>
                        </tr>
                    </thead>
                    <tbody>
                        {employeeslist.map(emp => (
                            <tr key={emp.Id}>
                                <td>{emp.Id}</td>
                                <td>{emp.EmployeeName}</td>
                                <td>{emp.EmployeeSalary}</td>
                                <td>{emp.Adress}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>)
        }
        else {
            return (<div>No Record Found</div>)
        }
    }
}
export default Employeelist;

import React, { Component } from 'react';

class Productlist extends Component {
    render() {
        var tblheading = ['ProductName', 'Unit', 'Price'];
        var tblbody =
            [
                ['Northwoods Cranberry Sauce', '12 - 8 oz jars', "$25"],
                ['Ikura', '2 kg box', '$21'],
                ['Queso Cabrales', '12 - 12 oz jars', '$30'],
                ['Konbu', '2 kg box', '$15']
            ];
        return (
            <div>
                <h2>Product List</h2>
                <table className="table" >
                    <thead>
                        <tr>
                            {tblheading.map(head => <th>{head}</th>)}
                        </tr>
                    </thead>
                    <tbody>
                        {tblbody.map(row => <TableRow row={row} />)}
                    </tbody>
                </table>
            </div>
        );
    }
}

const TableRow = ({ row }) => {
    return (
        <>
            <tr>
                {row.map(val => <td>{val}</td>)}
            </tr>
        </>
    )
}

export default Productlist;

import logo from './logo.svg';
import './App.css';
import Employeelist from "./components/Employeelist";
import Productlist from "./components/Productlist";

function App() {
  return (
    <div className="container">
      <Employeelist/>
      <Productlist/>
    </div>
  );
}

export default App;