Show columns every four records

Question

I'm struggling how to show columns or break columns every four records. I'm using bulma columns and my goal is to show columns on every four records inside the array map. Thanks for help.

Inside the map function

{list.map(function(item, key){
return <div className="columns">
    <div className="column">{item.name}</div>
</div>
})}

Assuming the list is 8 records, the expected result should like this

<div className="columns">
   <div className="column">name 1</div>
   <div className="column">name 2</div>
   <div className="column">name 3</div>
   <div className="column">name 4</div>
</div>
<div className="columns">
  <div className="column">name 5</div>
  <div className="column">name 6</div>
  <div className="column">name 7</div>
  <div className="column">name 8</div>
</div>

Answer 1

You can create chunks from your array and then wrap each chunk with <div className="columns">

function array_chunks(array, chunks) {
  let result = [];
  let n = array.length;
  for (let i = 0; i < n; i += chunks) {
    result = [...result, array.slice(i, i + chunks)];
  }
  return result;
}

let columns = array_chunks(list, 4);


function App() {
  return (
    <div className="App">
      {columns.map(function(items, key) {
        return (
          <div className="columns">
            {items.map(function(item) {
              return <div className="column">{item.name}</div>;
            })}
          </div>
        );
      })}
    </div>
  );
}

Please see sandbox.