How to build dynamic items set multiply by 3 using react js

Question

Am trying to build dynamic vertical list set of 3 each. For this approach I have used %3 approach, but looks like not at numbers are printed in each set. Tried getOrderList method, but seems somewhere its going wrong, still doing my best to make it work.

Expected Output DOM

<div class="container">
   <div class="parent">
      <div>1</div>
      <div>2</div>
      <div>3</div>
   </div>
   <div class="parent">
      <div>4</div>
      <div>5</div>
      <div>6</div>
   </div>
   and so on...
</div>

Below is code what I have tried.

import ReactDOM from "react-dom";
import React from "react";

const lists = [
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "9",
  "10",
  "11",
  "12",
  "13",
  "14",
  "15",
  "16",
  "17",
  "18",
  "19",
  "20"
];

const getOrderList = () => {
  const listsLength = lists.length;
  const division = Math.floor(listsLength / 3);
  const reminder = listsLength % 3;
  const noOfRows = division + reminder;
  const groupedList = [];
  for (let j = 0, counter = 1; j < listsLength; j += division, counter += 1) {
    const toLength =
      counter <= reminder ? j + division + reminder : j + division;
    const slicedArray = lists.slice(j, toLength);
    j = counter <= reminder ? j + reminder : j;
    groupedList.push(slicedArray);
  }
  const shuffledArray = [];
  for (let k = 0; k < noOfRows; k += 1) {
    for (let i = 0; i < groupedList.length; i += 1) {
      const groupObject = groupedList[i][k];
      if (groupObject) {
        shuffledArray.push(groupObject);
      }
    }
  }
  return shuffledArray;
};

const App = () => {
  const listItems = getOrderList();
  console.log(listItems);
  return (
    <div>
      {listItems.map((item, idx) => (
        <div key={idx}>
          <div>{item}</div>
        </div>
      ))}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Demo Link

Answer 1

Something like this?

 const lists = ["1", "2", "3", "4", "5", "6", "7", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"]; const result = []; for (const [idx, item] of lists.entries()) { idx % 3 === 0 && result.push([]); result[result.length - 1].push(item); } const App = () => { return ( <div style={{ display: "flex" }}> {result.map(list => ( <div class="parent" style={{ width: 20 }}> {list.map(item => ( <div >{item}</div> ))} </div> ))} </div> ); }; ReactDOM.render(<App />, document.getElementById("root"));

 <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="root"></div>

Answer 2

I have modified your code to print a <br/> after every 3rd element. You can modify it to display as you desire.

const App = () => (
  <div>
    {lists.map((item, idx) => {
      return (
        idx % 3 === 0 ? 
        (
          <div key={idx}>
            <br/>
            {item}
          </div>
        )
        :
       (
        <div key={idx}>
          {item}
        </div>
       )
      );
    })}
  </div>
);

This would give you an output similar to this

1
2
3

4
5
6

7
8
9

10
11
12

13
14
15

16
17
18

19
20

Drop in a comment if this does not help!

Answer 3

I guess this is what you need, I would only be writing the javascript part. Sure you can use it on react once you understand it.

const result = [] // This is the item you intend to eventually map through for react
const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 11, 23, 34, 12, 1, 2, 3]

list.forEach(item => {
    if(!result.length){
        return result.push(new Set([item]))
    } else if (result[result.length - 1].size < 3){
        result[result.length-1].add(item)
    } else {
        result.push(new Set([item]))
    }
})

This would give you a result like => [(1, 2, 3), (4, 5, 6), (7, 8, 9)...] basically an array of sets.

Sure you can make the code smaller if you want