React if文を用いて配列の前半部分だけ表示、後半部分だけ表示をしたい

Question

現在、Reactでのwebサイト制作をしております。
困っている点として、表示したい配列データのindexの前半のみを表示する領域と
indexの後半のみを表示する領域で別々で表示してあげたいです。
また、こちらの二つをflexで2列にするのですが、必ず左側を1つ多く表示させたいです。

1.左用、右用にそれぞれmapを回して一旦配列の全データを2個出力
2.左ではindexの総数の半分以下のデータが表示されるようにする
3.右ではindexの総数の半分以上のデータが表示されるようにする
※総数が奇数の場合は左に寄せる、偶数の場合は半々にする

この2.3の工程の式をご教授いただければ幸いです。

import { Accordion } from "src/components/layouts/common/accordionQuestion";
import "react-responsive-carousel/lib/styles/carousel.min.css";

const accordionItems = {
  accordionList: [
    {
      title: "",
      text: "",
    },
    {
      title: "",
      text: "",
    },
    {
      title: "",
      text: "",
    },
    {
      title: "",
      text: "",
    },
    {
      title: "",
      text: "",
    },
    {
      title: "",
      text: "",
    },
    {
      title: "",
      text: ""
    },
    {
      title: "",
      text: "",
    },
    {
      title: "",
      text: ""
    },
    {
      title: "",
      text: "",
    },
    {
      title: "",
      text: "",
    },
  ],
};

export function Page() {
  return (
    <div>
      <Accordion accordionList={accordionItems.accordionList} />
    </div>
  );
}

import classes from "./index.module.scss";
import React from "react";
import { AccordionQuestionData } from "src/components/layouts/common/accordionQuestionData";

interface accordionData {
  title: string;
  text: string;
}
interface Props {
  accordionList: accordionData[];
}

export const Accordion: React.VFC<Props> = React.memo(function AccordionItem(
  props: Props
) {
  return (
    <div className={classes.position}>
      <h3 className={classes.title}>よくある質問</h3>
      <div className={classes.flexBox}>
        <div className={classes.flex}>
          {[...props.accordionList].map((items, index) => {
            if(index) {
              return (
                <AccordionQuestionData
                  key={index}
                  title={items.title}
                  text={items.text}
                />
              );
            }
          })}
        </div>
        <div className={classes.flex}>
          {[...props.accordionList].map((items, index) => {
            if(index) {
              return (
                <AccordionQuestionData
                  key={index}
                  title={items.title}
                  text={items.text}
                />
              );
            }
          })}
        </div>
      </div>
    </div>
  );
});

Comments

[maisumakun]

> こちらの二つをflexで2列にするのですが、必ず左側を1つ多く表示させたいです。

偶数個だった場合はどうするのですか？

[black-ddd]

説明不足ですみません。
総数が偶数個だと半々で表示されるようにしたいです。
総数が奇数個だった場合左を1つ多い状態にして必ず左側は偶数、右側は奇数という表示を取りたいです

[maisumakun]

> 総数が奇数個だった場合左を1つ多い状態にして必ず左側は偶数、右側は奇数という表示を取りたいです

4n+1個の場合、「左を1つ多い状態」と「左側は偶数、右側は奇数」が両立しませんが、どちらが正しいのですか？

[black-ddd]

左を1つ多い状態が正しいです！
総数を半分にする時に奇数偶数の概念が必要だと思ったので混ざってしまいましたすみません。
総数が9個数だった場合indexの0~4までが左、5~8が右のような形にしたいです。

Answer 1

配列にsplice()を使用すると簡単に分けることができるので、

export const Accordion: React.VFC<Props> = React.memo(function AccordionItem(
  props: Props
) {
  // classesを分割代入
  const {position, title, flexBox, flex} = classes;

  // accordionListをコピーする
  const accordionListArray = [...props.accordionList];
  
  // 分割点を決める
  const half = Math.ceil(accordionListArray.length / 2);
  
  // 配列を左右に分ける
  const leftList = accordionListArray.splice(0, half);
  const rightList = accordionListArray.splice(-half);
  
  return (
    <div className={position}>
      <h3 className={title}>よくある質問</h3>
      <div className={flexBox}>
        <div className={flex}>
          // 左側のデータ
          {leftList.map((items, index) => {
            // itemsを分割代入
            const {title, text} = items;
            
            return (
                <AccordionQuestionData
                  key={index}
                  title={title}
                  text={text}
                />
            );
          })}
        </div>
        <div className={flex}>
          // 右側のデータ
          {rightList.map((items, index) => {
            // itemsを分割代入
            const {title, text} = items;
            
            return (
                <AccordionQuestionData
                  key={index}
                  title={title}
                  text={text}
                />
            );
          })}
        </div>
      </div>
    </div>
  );
});

のようにできると思うのですが、挙動はいかがでしょうか？

分割点を決める際に配列要素数が奇数だった場合、小数点になるのですが、splice()に小数点を使用すると自動的に切り上げられ片方が多くなるようになっているので、それを使用して片方に偏ったデータが作れます。

Comments

[black-ddd]

回答遅れて申し訳ございません！
理想の挙動になりました。
splice()の知識がまだまだだったので勉強になりました、ありがとうございました！