Mảng để tạo các thành phần con trong React

Giả sử chúng ta có một mảng các sản phẩm:

jsxconst prods = [
  {id: id(), name: 'product1', cost: 100},
  {id: id(), name: 'product2', cost: 200},
  {id: id(), name: 'product3', cost: 300},
];

Hãy hiển thị ba thành phần Product lên màn hình, truyền cho chúng dữ liệu từ mảng của chúng ta trong props. Tạm thời đừng sử dụng vòng lặp, mà chỉ đơn giản thực hiện truy cập các phần tử của mảng và đối tượng:

jsxfunction App() {
  return <div>
    <Product name={prods[0].name} cost={prods[0].cost} />
    <Product name={prods[1].name} cost={prods[1].cost} />
    <Product name={prods[2].name} cost={prods[2].cost} />
  </div>;
}

jsxconst users = [
  {id: id(), name: 'user1', surn: 'surn1', age: 30},
  {id: id(), name: 'user2', surn: 'surn2', age: 31},
  {id: id(), name: 'user3', surn: 'surn3', age: 32},
];