How to create function filter reactjs?

Question

In the image below is the review layout, I want to create a filter function. if the customer chooses a one star filter, then the one that will appear in the layout below the filter is only one star and so on, then if the customer chooses With Photos then only displays reviews with photos and vice versa Dengan Deskripsi (With Description)

below is the source code that displays the image above

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;

and this is the source of the filter button that I marked in red color

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;

then I make it directly in Codesanbox

Possible duplicate of how to make an excellent filter function ReactJs — Herohtar
– Herohtar, Commented Oct 22, 2019 at 3:32

Michael · Accepted Answer · 2019-10-09 03:44:51Z

1

Try this one

You need to fix your filterReviewRating to filter the right amount of stars

Original

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

New

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

And you also nee to change LatestReview/index.js

<Rate disabled defaultValue={rating} />

to

<Rate disabled value={rating} />

answered Oct 9, 2019 at 3:44

Michael

4052 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Putra Irawan Over a year ago

this is solved for selecting stars only, but for the function with Photos and with descriptions not working?

Michael Over a year ago

Its pretty much the same, check if the data has images or message with filter function then display it

Putra Irawan Over a year ago

I can't think of making it, can you help it

Putra Irawan Over a year ago

please heeeelp me

ken · Accepted Answer · 2019-10-09 03:52:08Z

0

My approach would be use state to store the "star" value. Refer to useState

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

Once you have the state updated by the buttons, you can easily apply to each element with something like this.

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

answered Oct 9, 2019 at 3:52

ken

1316 bronze badges

Collectives™ on Stack Overflow

How to create function filter reactjs?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related