sssds

by Artem

JavaScript

import React, { Component } from "react";
import { render } from "react-dom";

const container = {
  display: "flex"
};

const column = {
  border: "1px solud #ddd",
  padding: "10px 15px"
};

const config = {
  xn: 1,
  n: 1,
  m: 2,
  w: 2,
  xw: 3
};

// function buildColumns(data, columnCount) {
//   const columns = [];
//   for (let i = 0; i < columnCount; i = i + 1) {
//     columns.push(
//       <div className="column" style={column}>
//         {data[i].map((item, idx) =>
//           <div className="item" key={idx}>
//             {item.title}
//           </div>
//         )}
//       </div>
//     );
//   }
//   return columns;
// }

function buildColumn(data, columnCount, indexColumn) {
  return (
    <div className="column" style={column}>
      {data.map((item, idx) => {
        if (idx % columnCount === indexColumn) {
          return (
            <div className="item" key={idx}>
              {item.title}
            </div>
          );
        }
      })}
    </div>
  );
}

function buildColumns(data, columnCount) {
  const columns = [];
  for (let i = 0; i < columnCount; i = i + 1) {
    columns.push(buildColumn(data, columnCount, i));
  }
  return columns;
}

// function placeInColumn(columnCount, item, index) {
//   item.column = index % columnCount;
//   return item;
// }

class App extends Component {
  render() {
    // const updatedItems = items
    //   .map(placeInColumn.bind(null, columnCount))
    //   .reduce((acc, next) => {
    //     if (!acc[next.column]) {
    //       acc[next.column] = [];
    //     }
    //     acc[next.column].push(next);
    //     return acc;
    //   }, {});
    // console.log(updatedItems);
    const columnCount = config.m;
    const items = [
      {
        title: "Item #1",
        summary: "Summary #1"
      },
      {
        title: "Item #2",
        summary: "Summary #2"
      },
      {
        title: "Item #3",
        summary: "Summary #3"
      }
    ];
    return (
      <div...