Как объединить реквизит

Question

Допустим, мне нужно разделить div и реквизит.Мне нужно распространить опору на два отдельных дива.С учетом функции:

function Collection(props) {
   const coll = props.coll
   const coll_list = coll.map((coll, index) => {
      return (
         <span key={index}>{coll}</span>
      )
   })

   return (
      <div className="main_div">
         <div className="div_a">
            {coll_list}
         </div>
         <div className="div_b">
            {coll_list}
         </div>
      </div>
   )
}

Результат должен быть таким:

<div className="main_div">
   <div className="div_a">
      <span>item_1</span>
      <span>item_2</span>
      <span>item_3</span>
   </div>
   <div className="div_b">
      <span>item_4</span>
      <span>item_5</span>
      <span>item_6</span>
   </div>
</div>

Я буду признателен за все ответы.Спасибо.

Answer 1

Если вам нужно только разделить на 2 списка, вы можете найти середину и разделить массив на 2 части:

function Collection(props) {
   const coll = props.coll.map((coll, index) => (<span key={index}>{coll}</span>));
   const middle = Math.floor(coll.length / 2);
   const coll_list_a = coll.slice(0, middle);
   const coll_list_b = coll.slice(middle, coll.length);

   return (
      <div className="main_div">
         <div className="div_a">
            {coll_list_a}
         </div>
         <div className="div_b">
            {coll_list_b}
         </div>
      </div>
   )
}

Если вы хотите более надежное решение для разделения на части с длиной n, выМожно нарезать массив на куски и динамически создавать списки:

function chunkify(arr, n){
    let index = 0;
    const len = arr.length;
    const chunks = [];

    for (index = 0; index < len; index += n) {
        chunks.push(arr.slice(index, index + n));
    }

    return chunks;
}

function Collection(props) {
   const coll = props.coll.map((coll, index) => (<span key={index}>{coll}</span>));
   const chunks = chunkify(coll)

   return (
      <div className="main_div">
         {
            chunks.map((list, index) => (
               <div key={index} className={"div_" + index}>
                  {list}
               </div>
            ))
         }
      </div>
   )
}