【Nutanix UUIDエクスプローラーを作ってみよう】React で JavaScript へ挑戦 - filter編

前回まで、CDNを使い fetchして取得したデータで state を更新して、表示というところまでを実装してきました
データ表示部分にリアルタイムでフィルタする動作を付け加えてみます
ようやく JavaScript 触ってるっぽい感じに

【Nutanix UUIDエクスプローラーを作ってみよう】シリーズ
・Flask表示までのまとめ
・React で JavaScript へ挑戦 - CDN導入編
・React で JavaScript へ挑戦 - state編
・React で JavaScript へ挑戦 - fetch編
・React で JavaScript へ挑戦 - filter編←イマココ

環境の準備

今回の最終形態はコチラ(Github)で公開しています
＜フォルダ構造＞

配列（リスト）を扱う

リストは map関数を使います、返り値も配列になります
配列のすべての要素に対して呼び出し、その結果からなる新しい配列を作って返します

vms.map((value, key) => {
  return (
    <div key={key}>
      {val}繰り返し処理で表示する内容
    </div>
  );
})

（CDNで辞書型でキーを取り出したりはちょっとメンドそう）

試しにListクラス内で、サンプルの配列を作って map 使ってみるとこんな感じ（サンプルリストは UUID となんら関係ありません）

class List extends React.Component {
  render () {
    const labomen = ['kyoma', 'mayushi', 'daru', 'joshu', 'moeka', 'rukako', 'feilis', 'suzuha']
    const fglabo = labomen.map((member, key) => {
      return (
        <li key={key}>
          {member}
        </li>
      );
    })

    return (
      <div className="list">
        <ol>
          {fglabo}
        </ol>
      </div>
    );
  }
}

繰り返し処理される一番外の要素には key をつけてやらないと怒られます

フィルターしてみる

入力された文字列と一致する要素だけを表示するような、フィルターを実装してみたいと思います
filter関数を使うのが一般的なのかもしれませんが、CDN環境では使えなかったので、別の方法を使って入力されたキーワードにリアルタイムでフィルターしてみます

フィルターする方法として、「indexOf」を使ってみます

indexOf(filterText)

indexOf()は受け取ったテキストと一致する文字があれば、「インデックス番号」を、なければ「-1」を返します
これを使って、「-1」以外の要素を表示としてやります

文字が入力されるごとにレンダリングしてリアルタイムで表示を更新していきます（サンプルリストは UUID となんら関係ありません）

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filterText: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (event) => {
    this.setState( {[event.target.name]: event.target.value} )
  }

  render () {
    const labomen = ['kyoma', 'mayushi', 'daru', 'joshu', 'moeka', 'rukako', 'feilis', 'suzuha']
    const fglabo = labomen.map((member, key) => {
      if ( member.indexOf(this.state.filterText) !== -1 ) {
        return (
          <li key={key}>
            {member}
          </li>
        );
      }
      return;
    })

    return (
      <div className="list">
        <div><input type="text" placeholder="filter..." name="filterText" onChange={this.handleChange} /></div>
        <ol>
          {fglabo}
        </ol>
      </div>
    );
  }
}