React 条件に一致した配列を返す filter の使い方

こんにちは。

React にどっぷりハマっているタロです。

この記事では Rest API などで取得したまとまったデータから必要な要素だけを取り出したいときに使う filter ついてまとめます。

React で filter を使ってみた

filter は条件に一致した要素の配列を返すメソッドです。

つまり、TRUEになった条件の配列を返します。

サンプルコード

function App() {
  const userlists = [
    {id: 1, name: 'tanaka'},
    {id: 2, name: 'takahashi'},
    {id: 3, name: 'toriumi'},
    {id: 4, name: 'ueda'},
    {id: 5, name: 'kamenashi'},
  ]

  const res = userlists.filter(userlist => {
    return userlist.id !== 2
  })

  console.log(res);
}

ReactDOM.render(<App/>, document.getElementById('root'));

userlists は Web API から取得したデータと見立てて話を進めていきます。

userlists の中には id と name が格納されています。

下記のコード部分で userlists の中身を一つずつ確認し、userlist.id !== 2 にマッチした条件を res に返しています。

  const res = userlists.filter(userlist => {
    return userlist.id !== 2
  })

この例の場合、id が ２以外の結果を res に返しています。

コンソールを確認し次のような結果が出力されていれば成功です！

(4) [{…}, {…}, {…}, {…}]
0: {id: 1, name: "tanaka"}
1: {id: 3, name: "toriumi"}
2: {id: 4, name: "ueda"}
3: {id: 5, name: "kamenashi"}

おわりに

以上、filter を使った必要な要素のみの取得でした。