how to Create multiple row in React Bootstrap table

Question

How I can show stockVendorPriceList in multiple rows like the image below? I mean if I have an Array of Object in stockVendorPriceList it will show them separate row or if not then in a single row.

How I can create this Table as show in the image

 const products = [
    {
      code: "04465-YZZR3",
      name: "Front Brake Pad XLI, GLI",
      stockVendorPriceList: [
        {
          vendorId: 22,
          vendorCode: "noo - 01",
          price: 9085,
        },
        {
          vendorId: 1,
          vendorCode: "Aya - 01",
          price: 8970,
        },
      ],
    },
  ];

Answer 1

You should use the map function when you render your component.

in your component:

    return(
     {products.map((product)=>{return(<div>{product.id}</div>)}
   )

if it's for stockVendorPriceList Array it could be something like this:

<ProductRowComponent>
   {products[0].stockVendorPriceList.map((vendor)=>{
    return(<div>{vendor.vendorId}</div>)
})}
</ProductRowComponent>

products[0] is for the first product but you can also map on your products to generate the "ProductRowComponents"