今回の記事は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関連の記事を記載しているので、是非興味あればサイト内みていってください。
コメント