How to display result of map in two different columns

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

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

Advertisement

Answer