Форматирование JSON в JSON

Question

У меня есть компонент реагирования, в котором мне нужно визуализировать JSON, извлеченный из стороннего API. JSON имеет тип

[
    {
        color: "red",
        value: "#f00"
    },
    {
        color: "green",
        value: "#0f0"
    },
    {
        color: "blue",
        value: "#00f"
    },
    {
        color: "cyan",
        value: "#0ff"
    },
    {
        color: "magenta",
        value: "#f0f"
    },
    {
        color: "yellow",
        value: "#ff0"
    },
    {
        color: "black",
        value: "#000"
    }
]

Мне нужно отрендерить JSON в таблице из 3 столбцов.

Red     Green     Blue
Cyan    Magenta   Yellow
Black

Я могу выполнить рендеринг в стиле одного столбца, но у меня проблемы с несколькими столбцами.

Есть ли способ, которым я могу это сделать?

Answer 1

Вы должны обновить стиль компонента следующим образом.

const data = [
  {
    color: "red",
    value: "#f00"
  },
  {
    color: "green",
    value: "#0f0"
  },
  {
    color: "blue",
    value: "#00f"
  },
  {
    color: "cyan",
    value: "#0ff"
  },
  {
    color: "magenta",
    value: "#f0f"
  },
  {
    color: "yellow",
    value: "#ff0"
  },
  {
    color: "black",
    value: "#000"
  }
];

class Hello extends React.Component {
  render() {
    return (
      <div style={{ display: "flex", flexWrap: "wrap" }}>
        {data.map(item => (
          <div style={{ flex: 1, flexBasis: "33%" }}>{item.color}</div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<Hello />, document.getElementById("container"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="container"></div>