Reactでリアルタイムの検索機能と複数条件での絞込

下の記事を参考にカテゴリーごとに絞り込むreactコンポーネントを作成してみた。 　変更したのはカテゴリーの内容が複数条件の場合に書き換えた。 qiita.com

import React, {  useState } from 'react';

import Paginate from "../components/paginate"

const Search = ({ book, catetag }) => {
  const [showPosts, setShowPosts] = useState(book);

  // カテゴリーリスト
  const categories =catetag //["コミック","小説","少年コミック"]
  // カテゴリー絞り込み
  const selectCategory = (category) => {
    // allを選択した場合は早期return
    if (category === "all") {
      setShowPosts(book);
      return;
    }

    const selectedPosts = book.filter((post) => {
    //console.log(post.Category)
    const cate =post.Category.split(',')
        return [...cate, ...category].filter(item => cate.includes(item) && category.includes(item)).length > 0
    //return book.Category === category
    });
    setShowPosts(selectedPosts);
  };
  

    return (
      <>
      {/* カテゴリー選択ボタン */}
      <div>
        <h4>クリックしてカテゴリーで絞り込みが可能</h4>
        <button onClick={() => selectCategory("all")}>全て</button>
        {categories.map((category) => (
          <button onClick={() => selectCategory(category)}>{category}</button>
        ))}
      </div>
        <Paginate itemsPerPage={10} items={showPosts} />
      </>
    );
  }

export default Search

spreadsheep.net

この二つを組み合わせた感じが欲しい機能に近い。

filter関数のおさらい qiita.com

重複の抽出 www.dkrk-blog.net