ページ内の文字列を検索してフィルタリングするコンポーネント

ページ内の文字列を検索して、それだけ残す

こんなかんじに検索して、絞り込むものを作ります。

前提として、環境は
・Next.js
・TypeScript
となっています。
※アイコンとかは違うコンポーネントなので省略して書きます。

index.tsx

import styles from './SearchForm.module.scss'
import cn from 'classnames'

export interface Props = {
  placeholder?: string
  className?: string
  id?: string
  onInput?: (e: React.FormEvent<HTMLInputElement>) => void
}

export const SearchForm: React.FC<Props> = ({ className, placeholder, id, onInput }) => (
  <form className={cn(styles.default, className)}>
    <input name="search" type="text" placeholder={placeholder} id={id} onInput={onInput} />
  </form>
)

このように検索するinputタグのコンポーネントを作ります。
これはまだ、外観を用意しただけで、実際に動かすのはimportされたコンポーネント内です。

pages/index.tsx

import SearchForm from '~/components/domains/SearchForm'

const CityListPage: NextPage = () => {
　// 入力キーワードをState化する
　const [searchKeyword, updateSearchKeyword] = React.useState('')
 // 入力イベントに反応してStateを更新する
  const onInput = (event: React.FormEvent<HTMLInputElement>) => {
  　// 入力キーワードをstateに格納する
    updateSearchKeyword(event.currentTarget.value)
  }
  const filteredList = cities.filter((item) => {
  　// 文字列の部分一致するものだけを残す
    return new RegExp(searchKeyword).test(item.name)
  })
  return (
    <SearchForm placeholder="市郡を検索する" onInput={onInput} />
    <div>
    　　// ここでマッピングして表示されることとなります
	{filteredList.map((item, key) => {
          return (
            ...
          )
        })}
     </div>
  )
}

export default CityListPage

これで、実装は出来たかと思います。

このページを参考に、日本語の文字列で検索できるようにアレンジを加えました。
https://zenn.dev/himenon/articles/4c6d7ed8b7df30