Material Ui payment element dynamic

Question

I was facing difficulties to make material UI payment elements dynamically so, I would like to share how I make them dynamically here is GUI you can get this code from the material UI website

here is the code of static data

  const rows = [
      createRow('Paperclips (Box)', 100, 1.15),
      createRow('Paper (Case)', 10, 45.99),
      createRow('Waste Basket', 2, 17.99),
    ];

Answer 1

here I am supposing that you have data in the data variable, or it is coming from API

first, destruct array data

 const newData = data.map(({ name: name, price: price,quantity:quantity }) => ({name, price,quantity}));

Update your rows

let newArray = [] 
for(let i = 0 ;i<newData.length;i++)
{

 newArray.push(createRow(newData[i].name, newData[i].quantity, newData[i].price))

}

const rows =newArray;