How to display result of map in two different columns

Question

I have a task, but i couldnt get the solution for it in reactjs. I would like to show the result in two columns like: So every next element should be added in the second column, but the first column should be limited to 2 rows.

item 1 | item 4
item 2 | item 5
       | item 6

When i loop through the array the columns are getting divided into equal order, but as you see in the diagram i need to split them in 2:3 ratio. I am giving the sandbox link here on what i have tried so far.

// Example class component
class Thingy extends React.Component {
  render() {
  const secondaryNav = [
    {
      title: "Games",
      name: ["Roadrash", "Prince of Persia", "Counter Strike"]
    },
    {
      title: "Resources",
      name: ["Images", "Videos", "E-books"]
    },
    {
      title: "Shop",
      name: ["Shop now"]
    },
    {
      title: "Account",
      name: ["Log In", "Register"]
    },
    {
      title: "Support",
      name: ["Email", "Call Us", "Get a callback"]
    }
  ];
    return (
      <div className="App">
      <div className="container">
        <div className="row">
          {secondaryNav.map((item, i) => {
            return (
              <div className="col-lg-6 col-md-6">
                <h3>{ item.title }</h3>
                <ul>
                  {item.name.map((items, i) => {
                    return <li>{items}</li>
                  })}
                </ul>
              </div>)
          })}
        </div>
      </div>
    </div>
    )
  }
}

// Render it
ReactDOM.render(
  <Thingy title="I'm the thingy" />,
  document.getElementById("react")
);

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
crossorigin="anonymous">

SANDBOX

Answer 1

Some good answers there, but for I wanted to add a CSS-only one. In my case some of the element could eventually render null, so with Javascript I was ending up with one column having 6 elements and the other one only two.

I thought of a .filter() where I rendered every element to see whether they were null or not but that seemed very ineficient.

Dug a bit and ended up using the following CSS:

.container {
  columns: 2;
  column-gap: 1rem;
}

.container > * {
  /** Avoid CSS splitting any elements in two */
  break-inside: avoid;
  
  /** Demo */
  background-color: #f0f;
  width: 100%;
  height: 30px;
  margin-bottom: 1rem;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

slice can help us slice the array between (0,2) and (2,5) indices and accordingly we can map over the divs. We don't need row class coming from bootstrap for this use-case. Can simply replace it with col as well.

Updated question sandbox - https://codesandbox.io/s/goofy-black-4m4ii?file=/src/styles.css

Answer 3

You need to add the css on it and also you could slice your array as you like.

this is the piece of the code

<div className="row">
  {secondaryNavData.slice(0, 2).map((item, i) => {
    return (
      <div className="col-lg-6 col-md-6">
        <h3>{item.title}</h3>
        <ul>
          {item.name.map((items, i) => {
            return <li>{items}</li>;
          })}
        </ul>
      </div>
    );
  })}
</div>
<div className="row-2">
  {secondaryNavData.slice(2, 5).map((item, i) => {
    return (
      <div className="col-lg-6 col-md-6">
        <h3>{item.title}</h3>
        <ul>
          {item.name.map((items, i) => {
            return <li>{items}</li>;
          })}
        </ul>
      </div>
    );
  })}
</div>

Try this codesandbox based on yours for the full code with the css https://codesandbox.io/s/elegant-grass-nmeux