React JS: Как корректно отобразить данные с сервера на странице

Question

У меня есть страница на которой отображается список уже оформленных заказов. Данные приходят с сервера в таком виде:

const data = [
  {
    id: 1,
    products: [
      {id: 1, title: "Dell Laptop", price: 24560},
      {id: 2, title: "Macbook M1", price: 91000},
    ],
  },
  {
    id: 2,
    products: [{id: 1, title: "MSI Laptop", price: 41900}],
  },
];

Моя задача - отобразить их следующим образом:

Что у меня есть:

Так я могу добраться до нужных мне товаров:

data.map((obj) => obj.products);

Так я могу соединить все товары в один массив:

data.map((obj) => obj.products).flat()

//or

data.reduce((prev, obj) => [...prev, ...obj.products], []);

//or

data.flatMap((obj) => obj.products);

На выходе в консоли получаю это:

[
  { id: 1, title: 'Dell Laptop', price: 24560 },
  { id: 2, title: 'Macbook M1', price: 91000 },
  { id: 1, title: 'MSI Laptop', price: 41900 }
]

На странице карточки товаров отображаются следующим образом:

А мне нужно так:

Answer 1

В данном случае не нужно изменять исходные данные, проще отобразить их таким образом: сначала проходим по элементам массива data и каждый элемент будет отображен в компоненте <Order />. Далее в компоненте <Order /> проходимся по продуктам и отображаем их. Получается примерно так:

import React from "react";

const Page = () => {
  const data = [
    {
      id: 1,
      products: [
        { id: 1, title: "Dell Laptop", price: 24560 },
        { id: 2, title: "Macbook M1", price: 91000 },
      ],
    },
    {
      id: 2,
      products: [{ id: 1, title: "MSI Laptop", price: 41900 }],
    },
  ];

  return (
    <div>
      {data.map(({ id, products }) => (
        <Order key={id} products={products} id={id} />
      ))}
    </div>
  );
};

const Order = ({ products, id }) => {
  return (
    <>
      <div style={{ textAlign: "left" }}>Order#: {id}</div>
      <div style={{ display: "flex" }}>
        {products.map(({ id, title, price }) => (
          <div
            key={id}
            style={{
              border: "1px solid black",
              margin: "1rem",
              padding: "1rem",
            }}
          >
            <div>Price: {price}</div>
            <div>Title: {title}</div>
          </div>
        ))}
      </div>
    </>
  );
};

export default Page;

БЛОГ НА HUSL

React JS: Как корректно отобразить данные с сервера на странице

Ответы (1 шт):