在React中基于类别作为className过滤帖子

Question

我对过滤器功能有疑问，我不确定下一步该怎么做。 我正在尝试实现过滤器功能，在该功能中，我将所有不同类别列出为帖子的按钮，然后单击“全部显示”或特定类别按钮以切换帖子的显示/隐藏。

所有帖子的类别标签都为className，切换按钮的类别标签也为className，但是我不确定如何使用过滤功能。

这是代码的样子：

import React, { Component } from 'react';
import { Config } from "../config.js";
import {Grid, List} from "./Icons.js";
import Link from "next/link";

class AllTjansterList extends Component {

    constructor() {
        super();
        this.state = {
            tjanster: [],
            categories: [],
        };
    }

    componentDidMount() {
        let tjansterURL = `${Config.apiUrl}/wp-json/wp/v2/tjanster/?_embed`
        fetch(tjansterURL)
            .then(res => res.json())
            .then(res => {
                this.setState({
                tjanster: res
            })
        })
        let catURL = `${Config.apiUrl}/wp-json/wp/v2/categories/?_embed`
        fetch(catURL)
            .then(res => res.json())
            .then(res => {
                this.setState({
                categories: res
            })
        })
    }

    render() {

        let tjanster = this.state.tjanster.map((tjanster, index) => {
            for (var i = 0; i < tjanster._embedded['wp:term'][0].length; i++) {
                let cat = tjanster._embedded['wp:term'][0][i].name;
                let catSlug = tjanster._embedded['wp:term'][0][i].slug;
                    return <div key={index} className={catSlug}>{tjanster.title.rendered}</div>
                }
        });

        let categories = this.state.categories.map((categories, index) => {
            if (categories.count !== 0) {
                return <a key={index} href="" className={categories.slug}><li>{categories.name}</li></a>
            }
        });

        return (

            <div className="bg-grey">
                <ul>
                    <a href="" className="all"><li>Show all</li></a>
                    {categories}
                </ul>
                {tjanster}
            </div>

        )
    }   

}

export default AllTjansterList;