I have in issue with filter function in my react ecommerce app

React filter function is working

When I click on the filter option like "Denim", "shirt" etc it should filter the products and show only those items only. I used the handleTag function to filter the array of products and then update the setfilterProducts but it is not working.

Below my main file Home.jsx

function Home() {
    const [products, setProducts] = useState([]);
    const [filterProducts, setFileterProducts] = useState([]);
    const [sortValue, setSortValue] = useState('');
    const [tag, setTag] = useState('');
    // const [error, setError] = useState('');

    const loadAllProducts = () => {

    /*var myArray = ['a', 1, 'a', 2, '1'];

    let unique = [...new Set(myArray)];

    console.log(unique); // unique is ['a', 1, 2, '1']*/
    let ar = data.map(item => item.tag);
    let uniqueEle = [...new Set(ar)];
    // console.log(uniqueEle);
    setProducts(data);
    setFileterProducts(data);
}

useEffect(() => {
    loadAllProducts();
    handleSort();
    handleTag();
}, [filterProducts, sortValue, tag])

const handleSort = (value) => {
    setSortValue(value);
    listProducts();
}

function listProducts() {
    
    if(sortValue !== '') {
        // console.log("SORT: "+sortValue)
        products.sort((a, b) => sortValue === 'lowest' ? (parseInt(a.price) > parseInt(b.price) ? 1:-1) : (parseInt(a.price) < parseInt(b.price) ? 1:-1))
    } else {
        // console.log("INSIDE THE ELSE PART");
        products.sort((a, b) => (a.id > b.id ? 1 : -1))
    }
    return {setFileterProducts: products}
}

const handleTag = (value) => {
    // console.log(value);
    setTag(value);
    listTagProduct();
}

function listTagProduct() {
    if(tag !== '') {
        if(tag === 'Denim') {
            console.log(tag);
            let filterAr = tagFilter(tag);
            console.log("FilterArr "+filterAr);
            return {setFileterProducts: filterAr}
        } else if(tag === "T-shirt") {
            let filterAr = tagFilter(tag);
            return {setFileterProducts: filterAr}
        } else if(tag === "shirt") {
            let filterAr = tagFilter(tag);
            return {setFileterProducts: filterAr}
        } else if(tag === "jacket") {
            let filterAr = tagFilter(tag);
            return {setFileterProducts: filterAr}
        }
    }
    return {setFileterProducts: products}
}

// utility function
function tagFilter(tag) {
    let ar = filterProducts.filter(item => item.tag === "Denim");
    // console.log(ar);
    return ar;
}

return (
    <div className =  "container-fluid">
        <h2>All Products: {filterProducts.length}</h2>
        <Filter 
            product = {filterProducts} 
            handleSort = {handleSort} 
            sort = {sortValue}
            handleTag = {handleTag}
            tag = {tag}
        />
        <hr />
        <div className="row custom-card">
                {filterProducts.map((product, idx) => {
                    console.log(product);
                    return(
                        
                   

     <div key = {product.id} className="col-md-3 mb-2">
                                <Card products = {product}/>
                            </div>
                        )
                    })}
            </div>
        </div>
    )
}

    export default Home

This uses to display the filter options Filter.jsx

function Filter(props) {
    const handleChange = (event) => {
        // console.log(event.target.value);
        return props.handleSort(event.target.value);
    }

const handleTagChange = (event) => {
    // console.log(event.target.value);
    return props.handleTag(event.target.value);
}
let tagNames = ["T-shirt", "shirt", "Denim", "jacket"];
return (
    <div className="container-fluid">
        <div className="row">
            <div className="col-12 col-md-9">
                <p className = " mr-2">Filters:<span className="mr-4"></span>
                    {tagNames.map((item, idx) => (
                        <span key = {idx} >
                            <button 
                                type="button" 
                                class="btn btn-outline-secondary mr-2 custom-filter"
                                value= {item}
                                onClick = {handleTagChange}
                            >{item}</button>
                        </span>
                    ))}
                </p>
                </div>
            <div className="col-12 col-md-3">
            <select className="form-control" value = {props.sort} onChange = {handleChange}>
                {/* {console.log("CHECKING: "+props.sort)} */}
                <option value="">Sort by</option>
                <option value="lowest">lowest to highest</option>
                <option value="highest">highest to lowest</option>
            </select>
            </div>
        </div>
    </div>
)

}

    export default Filter

codesandbox link

filter is not working(when I click on the filter option like Denim it should only the Denim product)

24 thoughts on “I have in issue with filter function in my react ecommerce app”

Leave a Comment