Фильтрация сообщений на основе категории как className в React - PullRequest
Новая
       14

Фильтрация сообщений на основе категории как className в React

0 голосов
/ 13 декабря 2018

У меня проблема с функцией фильтра, когда я не уверен, что делать дальше.Я пытаюсь реализовать функцию фильтра, в которой я перечисляю все различные категории в качестве кнопок для своих сообщений, а затем могу нажать кнопку «Показать все» или кнопку определенной категории, чтобы включить / отключить отображение сообщений.

У всех сообщений есть категория slug как className, а у переключателей также есть категория категории slug как 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;
...