下の記事を参考にカテゴリーごとに絞り込む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
この二つを組み合わせた感じが欲しい機能に近い。
filter関数のおさらい qiita.com
重複の抽出 www.dkrk-blog.net