簡単に作れるReactの検索機能の実装

今回はReactの検索機能の実装方法を説明します。

参考記事
https://qiita.com/koichi0909/items/8476073805306df60781

検索フォームを作る

最初に検索フォームを作ります。
ここでは、usestateで、検索したい値を入れるsearchNameの変数を作ります。
そして、inputで入力できるようにし、入力値をsearchNameに入るようにします。

const [searchName, setSearchName] = useState("");

return (
        <>
         <input
          type="text"
          placeholder="todoを探す"
          onChange={(event) => {
            setSearchName(event.target.value);
          }}
        />
       </>
)

表示する

残りは表示するだけになります。
mapする前にfitterで絞り込みを行います。
最初にif文では、inputの値がない場合は、そのままdataを返します。
そして、data.titleがSearchNameに含まれる値が同じだった場合、
それと同じdata.titleを返します。
toLowerCaseは小文字に変換するメソッドです。

もしidにしたい場合は、data.idにすれば作ることができます。
とても使い勝手がいいので、ぜひ使って見てください。

return(
          {firedata
            .filter((data) => {
              if (searchName === "") {
                return data;
                //そのまま返す
              } else if (
                data.title.toLowerCase().includes(searchName.toLowerCase())
                //valのnameが含んでいたら小文字で返す　含んでいないvalは返さない
              ) {
                return data;
              }
            })
            .map((data) => {