【React】filterメソッドを使ってフィルター検索機能を実装する

Cordova アプリで filter メソッドを使った簡易的な検索機能を実装したので備忘録…というか、いざというときのコピペ元としてまとめ。
React だと、ページの再読み込みをせずに簡単にページの再レンダリングができるので、使っていてストレスがなくていいですね。

今回参考にさせていただいた記事はこちらです。

Reactで絞り込み機能付き検索を実装してみた – Qiita
https://qiita.com/yoshimo123/items/fa21b4cdd293b57b8cc9

まず、コード全体がこちら。

import React, { Component } from 'react';
import Item from '../components/Item';

class SearchPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rawData: [りんご, オレンジ, バナナ, ぶどう, いちご],
      listData: [],
      searchWord: '',
    }
    this.searchItems = this.searchItems.bind(this);
  }
  componentDidMount() {
    this.setState({ listData: this.state.rawData });
  }
  searchItems(searchWord) {
    let listData = this.state.rawData.filter((item) => {
      return item.name.indexOf(searchWord) > -1;
    });
    this.setState({
      listData: listData,
      searchWord: searchWord,
    });
  }
  render() {
    let list = [];
    for (let i in this.state.listData) {
      list.push(<Item data={this.state.listData[i]} />);
    }
    return (
      <div>
        <input type="search" value={this.state.searchWord} onChange={(event) => this.searchItems(event.target.value)} />
        { list }
      </div>
    );
  }
}

export default SearchPage;

実際に検索処理を行っているのは、17行目の searchItems 関数内です。
検索欄の文字が書き換えられたタイミングで発火し、そのキーワードを使ってフィルターの処理を行っています。
この関数内で使用している filter メソッドは、Callback 関数が true の時の要素のみで新たに配列を作成してくれます。
上記コードでは、その新しい配列を listData という変数に保存しています。
で、その結果を state の listData に保存し、再レンダリングを行っています。

そしてこの Callback 関数では、検索欄に入力された文字列が要素内に含まれているかどうかを、indexOf 関数を使ってチェックしています。
indexOf 関数は、もし要素内に指定した文字列が含まれていたらその位置（インデックス）を返し、見つからなかったら -1 を返します。
そのため、-1 以上の値が返ってくれば、要素内に文字列が含まれている、ということになりますので、そのような条件式にしています。
行っている処理はそこまで複雑ではありませんね。

なお、描画の際に私は Item というコンポーネントを別ファイルで作成し、それをインポートして使っています。
こうしてコンポーネントを分けると、ファイル内のコードがすっきりするのでお勧めです。

基本的には以上です！
あとは、仕様に合わせて適宜変更してください。

以上、React でフィルター検索機能を実装する方法でした。
ご参考になれば幸いです。