How to Remove Specific Query Filter From url in nextJS Application

Question

i'm trying to add product filtering functionality like this: filter product image and after add filter i have to clear filter as user wish like this one: clear filter image if anyone give me real world idea with some more details or short word it can help me be more proffessional.

Answer 1

Well let's assume your filters data is like this:

[
    {
        catrgory: "Color",
        values: [
            "Silver",
            "Black",
            ...
        ]
    },
    {
        catrgory: "Material",
        values: [
            "Acrylic",
            "Rayon",
            ...
        ]
    },
    ...
]

1. You should have 2 states in your component. One for holding the filters data and another for holding the selected filters.

2. Fetch your filters data from the server once. (Or use a local file).

3. Each time the user selects a filter, you should add it to your selected filters data.

4. Each time the user remove a filter, you should remove it from your selected filters data.

Hope it helps (It's just a guide not the whole solution):

const MyComponent = () => {
    const [filtersData, setFiltersData] = useState([]);
    const [selectedFilters, setSelectedFilters] = useState([]);

    useEffect(() => {
        // fetch data from the server
    }, []);

    const handleSelectFilter = (category, value) => {
        const newSelectedFilters = [...selectedFilters];
        let filter = newSelectedFilters.find((selectedFilter) => selectedFilter.category === category);
        if(filter) {
            filter.values.push(value);
        } else {
            filter = {
                catrgoty: category,
                values: [value]
            }
            newSelectedFilters.push(filter);
        }
        setSelectedFilters(newSelectedFilters);
    }

    const handleDeleteFilter = (category, value) => {
        let newSelectedFilters = [...selectedFilters];
        const index = newSelectedFilters.findIndex((selectedFilter) => selectedFilter.category === category);
        newSelectedFilters = newSelectedFilters.splice(index, 1);
        setSelectedFilters(newSelectedFilters);
    }

    return (
        <div>
            {
                filtersData.map((filterItem, index) => {
                return (
                    <div key={index}>
                    <div>{filterItem.category}</div>
                    {
                        filterItem.values.map((value) => {
                        return (
                            <div key={value} onClick={() => handleSelectFilter(filterItem.category, value)}>{value}</div>
                        )
                        })
                    }
                    </div>
                )
                })
            }
            {
                selectedFilters.map((selectedFilter, index) => {
                return (
                    <div key={index}>
                    <div>{selectedFilter.category}</div>
                    {
                        selectedFilter.values.map((value) => {
                        return (
                            <div key={value} onClick={() => handleDeleteFilter(filterItem.category, value)}>{value}</div>
                        )
                        })
                    }
                    </div>
                )
                })
            }
        </div>
    );
}