Как создать функцию filter реакции?

Question

На изображении ниже представлен макет обзора, я хочу создать функцию фильтра. если клиент выбирает фильтр с одной звездой, то тот, который будет отображаться в макете под фильтром, будет иметь только одну звезду и т. д., тогда, если клиент выбирает «С фотографиями», тогда отображаются только обзоры с фотографиями, и наоборот Dengan Deskripsi (с описанием)

ниже - исходный код, который показывает изображение выше

import React, { useEffect, useState } from 'react';
import RatingCardProductDetail from '../../components/RatingCardProductDetail';
import "./style.sass";
import FilterReviewProductDetail from '../../components/FilterReviewProductDetail';
import { Row, Col, Pagination, Spin } from 'antd';
import LatestReview from '../../components/LatestReview';
import strings from '../../localization/localization';
import Product from '../../repository/Product';

function ReviewProductDetail({ productId }) {
    const [reviewRatingDetail, setReviewRatingDetail] = useState({})
    const [reviewRating, setReviewRating] = useState([])
    const [notFound, setNotFound] = useState(false)
    const [loading, setLoading] = useState(false)
    const [ratingStar, setRatingStar] = useState()

    useEffect(() => {
        getReviewRatingDetail();
        getReviewRating();
        setRatingStar('')
    }, [productId])


    async function getReviewRatingDetail() {
        let reviewRatingDetail = await Product.reviewRatingDetail({
            productId: productId
        })
        if (reviewRatingDetail.status === 200) {
            setReviewRatingDetail(reviewRatingDetail)
        } else {
            setReviewRatingDetail({})
        }
    }

    async function getReviewRating() {
        let reviewRating = await Product.reviewRating({
            productId: productId,
            loading: setLoading
        })
        if (reviewRating.status === 200) {
            setReviewRating(reviewRating)
            setNotFound(false)
        } else {
            setReviewRating([])
            setNotFound(true)
        }
    }

    function actionChangeSelectFilter(e) {
        console.log(e);
        setRatingStar(e)
    }

    const filterReviewRating = reviewRating.review &&
        reviewRating.review.filter(review => {
            return Object.keys(review).some(key =>
                review[key].toString().includes(ratingStar)
            );
        })

    console.log('filterReviewRating', filterReviewRating);

    return (
        <Spin spinning={loading}>
            <div className="mp-review-product-detail">
                {notFound ?
                    <div className="mp-product-detail__not-found">
                        <span>
                            Belum ada ulasan untuk produk ini
                        </span>
                    </div> :
                    <React.Fragment>
                        <RatingCardProductDetail
                            reviewRatingDetail={reviewRatingDetail} />
                        <Row>
                            <Col md={17} offset={3}>
                                <div className="mp-review-product-detail__filter">
                                    <FilterReviewProductDetail
                                        actionChangeSelectFilter={actionChangeSelectFilter} />
                                </div>
                            </Col>
                        </Row>
                        <h3>{strings.latest_review}</h3>
                        {reviewRating.review &&
                            filterReviewRating.map((review, i) => {
                                return <LatestReview key={i} review={review} />
                            })}
                        <Pagination
                            className="mp-pagination-review-product-detail"
                            defaultCurrent={1}
                            total={5} />
                    </React.Fragment>}
            </div>
        </Spin>
    );
};

export default ReviewProductDetail;

, и это источник кнопки фильтрачто я пометил красным цветом

import React from 'react';
import { Rate, Radio } from 'antd';

function FilterReviewProductDetail({ actionChangeSelectFilter }) {

    const filterReviewMap = [
        {
            name: 'Semua',
            value: ' ',
            icon: ''
        },
        {
            name: 'Dengan Foto',
            value: 'Dengan Foto',
            icon: ''
        },
        {
            name: 'Dengan Deskripsi',
            value: 'Dengan Deskripsi',
            icon: ''
        },
        {
            name: '1',
            value: 1,
            icon: <Rate disabled defaultValue={1} count={1} />
        },
        {
            name: '2',
            value: 2,
            icon: <Rate disabled defaultValue={1} count={1} />
        },
        {
            name: '3',
            value: 3,
            icon: <Rate disabled defaultValue={1} count={1} />
        },
        {
            name: '4',
            value: 4,
            icon: <Rate disabled defaultValue={1} count={1} />
        },
        {
            name: '5',
            value: 5,
            icon: <Rate disabled defaultValue={1} count={1} />
        }
    ]
    return (
        <React.Fragment>
            <span>Filter</span>
            <Radio.Group
                defaultValue={"Semua"}
                size="large"
                onChange={e => actionChangeSelectFilter(e.target.value)}>
                {filterReviewMap.map((review,i) => {
                    return <Radio.Button key={i} value={review.value}>
                        {review.name}{review.icon}
                    </Radio.Button>
                })}
            </Radio.Group>
        </React.Fragment>
    );
};

export default FilterReviewProductDetail;

тогда я делаю это прямо в Codesanbox

Answer 1

Попробуйте этот

Вам нужно исправить свой фильтрReviewRating для фильтрации нужного количества звезд

Оригинал

const filterReviewRating = dataDummy.filter(review => {
    return Object.keys(review).some(key =>
      review[key]
        .toString()
        .toLowerCase()
        .includes(ratingStar)
);
});

Новый

const filterReviewRating = dataDummy.filter(review => {
    //Check if ratingStar is empty
    if (!ratingStar) 
        return true;
    return review.rating == ratingStar;
});

И вам также необходимо изменить LatestReview / index.js

<Rate disabled defaultValue={rating} />

на

<Rate disabled value={rating} />

Answer 2

Мой подход заключается в использовании состояния для хранения «звездного» значения. См. useState

const [starFilter, setStarFilter] = useState('all');

После того, как вы обновите состояние с помощью кнопок, вы можете легко применить к каждому элементу что-то вроде этого.

{filterReviewMap.map((review,i) => {
    return (starFilter=== 'all' || starFilter===review.value) &&
        <Radio.Button key={i} value={review.value}>
            {review.name}{review.icon}
        </Radio.Button>
})}