Display array of product in ReactJs

Question

I am implementing a component called Table, imported from react-bootstrap. I am currently passing data from parent to child by arrays, but I am having difficulty writing arrays through the parent class, I do not know how to write code in this case

Here is my code in index.js in folder src/components/table/index

import React from 'react';
import {Table, Image} from 'react-bootstrap';
import '../Table/index.css';
import Button from '../Button/index';

const TableItem = ({productList}) => {
  const redirectToEdit = () => {
    console.log("Open edit form for me, please?")
  }

  const deleteProductItem = () => {
    console.log("The product has been deleted")
  }
  return(
    <Table striped bordered hover>
      <thead>
        <tr>
          <th>No. </th>
          <th>Image</th>
          <th>Name</th>
          <th>Category</th>
          <th>Price</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {productList.map((product, index) => (
          <tr key={index}>
            <td>{product.id}</td>
            <td><Image src={product.image} /></td>
            <td>{product.name}</td>
            <td>{product.category}</td>
            <td>{product.price}</td>
            <td>
              <Button variant="success" onClick={redirectToEdit}>Edit</Button>
              <Button variant="danger" onClick={deleteProductItem}>Delete</Button>
            </td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
}

export default TableItem;

And here is my code in app.js folder src/app.js

<TableItem 
   productList={["1", "https://place-hold.it/100x150", "Black milk tea", "Milk Tea", "10000"]}
/>

IN above, I just added 1 product, but it do not display when I run, My problem is how can I write many products for this in app.js by array

Can anyone help me please, thank you so much?

Answer 1

The product list array should look like this:

const productList=[
{
  id:"1",
  image:"https://place-hold.it/100x150",
  name:"Black milk tea",
  category:"Milk Tea",
  price:"10000"
},{
  id:"2",
  image:"https://place-hold.it/100x150",
  name:"Black milk tea",
  category:"Milk Tea",
  price:"10000"
}];
.
.
.
<TableItem productList={productList} />