スポンサーリンク

【React】オブジェクト配列のStateの中身をソートする方法ご紹介。

TypeScript
スポンサーリンク

今回の記事はReactでuseStateのオブジェクト配列のStateの中身をソートする方法をご紹介する内容です。一覧表示などを行っている場合、特定の項目で、配列をソートすることがあると思います。興味がある方は是非そちらを参考にしてみてください。

スポンサーリンク

Reactでブジェクト配列のStateを扱う

まずは適当なオブジェクト型配列のStateを定義し、リストなどで表示してみましょう。

// サンプルの型
const TestType = {
   id: number,
   name: string,
};

const defaultSample:TestType[] = [
  {
    id: 3,
    name: 'ccc',
  },
  {
    id: 2,
    name: 'bbb',
  },
  {
    id: 1,
    name: 'aaa',
  },
];

// 初期値は空配列にしておく
const [sample ,setSample] = useState<TestType[]>(defaultSample)

では上記で定義したstateをmap関数などを用いて適当に表示してみましょう。

const App: React.FC = () => {
  return <>
    { sample.map( x => {
      <div key={x.id}>
         {x.id}:{x.name}
      </div>
    })}
  </>;
}

これで、上から「ccc→bbb→aaa」の順番にidとnameが表示されていると思います。

例えばこの状態で、ソート処理を行う場合などにオブジェクト配列の順番を変更したいことがあると思います。

今回はstateのオブジェクト配列の中身をid順にソートし、再度レンダリングしていきましょう。

Reactでブジェクト配列のStateをソートする方法

const onSort = TestType => {
    // オブジェクトの型
    const TestType = {
       id: number,
       name: string,
    };
    
    // ソートのプロパティ
    const sortProperty = types[type];
    
    // ソート処理
    const sorted = bands.sort((a, b) => b[sortProperty] - a[sortProperty]);
    
    console.log(sorted);
    setData(sorted);
  };

上記をボタンアクションなどに設定することで、関数の処理が完了後setStateで、Stateの値がうわが枯れるので、再レンダリングが走り、idでのソートが完了するという流れです。

では今回の記事は以上です。他にも多数のReact関連の記事を記載しているので、是非興味あればサイト内みていってください。

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

TypeScript
スポンサーリンク
スポンサーリンク
ともぶろぐ

コメント

タイトルとURLをコピーしました