React 絞り込み検索

絞り込み検索

Reactで絞り検索を実装する

挙動動画

gyazo.com

ポイント

ポイントは、2つ。

1つめは、filterメソッドを利用する。 配列の中身を検索するメソッド。

検索ワードを、onChangeイベントで取得して、 filterメソッドで条件にヒットしたモノだけを配列で返してくれる。

2つめは、 初期の配列データ（initialTweets）と、 検索した後の配列データ（filterdTweets）を分ける。

表示したい配列データを1つだけだと、検索にヒットした配列をsetStateすると、初期の配列データがうわがかれてしまう為です。

ソース

※不要なコードは削除してます。

import React from "react"
import Tweet from '../tweets/tweet'

class Tweets extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      initialTweets: [], # 初期データ
      filterdTweets: [], # 検索にヒットしデータを
      value: '',
      image: ''
    }
  }

  #ここで初期データをセットする
  componentDidMount() {
    this.setState({
      initialTweets: this.props.tweets, 
      filterdTweets: this.props.tweets
    })
  }

 # onChangeイベンントで検索ワードを取得する
  handleSearch(e) {
    const keyword = e.target.value
    const tweets = this.state.initialTweets
    const filterd_tweets = tweets.filter((tweet) => tweet.body.includes(keyword))      # filterメソッドで条件にあったデータを取得
    this.setState({filterdTweets: filterd_tweets})  
  }

  render () {
    const { filterdTweets } = this.state

    return (
      <div className="container">
      <div className="row">
        <div className="col-xs-7 main">
          </div>
          <div className="tweets">
            {filterdTweets.map((tweet) => <Tweet key={tweet.id} tweet={tweet}/>)}
          </div>
        </div>
      </div>
    </div>
    );
  }
}

export default Tweets

参考記事

こちらの記事は、初期データをReact側で持っています。 私の記事は、Railsで初期のデータはpropsで取ってきています。

qiita.com