The url is changing but it is not redirecting me

Afeef Raza 0
Viewed 28

What I want is when I click on:

let Afeef = `/${category}`
<Link to={Afeef} className='products-categories'> <h4>{category}</h4></Link>

It should change products according to URL which could be "/electronics","/jewelry" etc but the problem I am facing is that it is changing my URL but the products are not changing. I can't understand what is the problem here. I tried different things but I cant understand it.

 import React, { useEffect, useState } from 'react'
    import { Link } from 'react-router-dom';
    import './Allproducts.css'
    import Categories from './categories.json'
    import ForYouItem from './ForYouItem'
    
    export default function Allproducts(props) {
        const [products, setProducts] = useState([]);
        useEffect(() => {
            fetch(`https://fakestoreapi.com/products/category/${props.category}`)
                .then((res) => res.json())
                .then((data) => setProducts(data))
        }, [])
        const [categories, setCategories] = useState([])
        const updateCategory = async ()=> {
            const url = "./categories.json"
           let data = await fetch(url);
           let parsedData = await data.json()
           setCategories(parsedData.title)
        }
        useEffect(() => {
            updateCategory();
        }, [])
        return (
            <>
                <div className="banner">
                    <h1>Afeef</h1>
                    <h4>Get best items in budget</h4>
                </div>
                <div className="main-grid">
                    <div className="left-grid">
                        <div className="left-categories">
                            <h1>Collections</h1>
                            {categories.map((category) => {
                                let Afeef = `/${category}`
    
                                return (
    
                                    <Link to={Afeef} className='products-categories'> <h4>{category}</h4></Link>
    
    
    
                                )
    
    
                            }
    
                            )}
                        </div>
                    </div>
    
                    <div className="right-grid">
    
                        <div className="row ">
                            {products.map((product) => {
                                return (
                                    <div className="col-md-4 my-2 Products-1">
                                        <ForYouItem Title={product.title.slice(0, 50)} Price={product.price} Imageurl={product.image} rate={product.rating.rate} count={product.rating.count} />
                                    </div>
    
    
                                )
    
                            }
    
                            )}
    
    
    
                        </div>
                    </div>
                </div>
            </>
        )
    }
reactjs
1 Answers

im gonna try to explain what i understand from your code. So based on the flow of your code, the product can only be fetch once when the page loaded.

but i think in your useEffect that fetch product, you can add the state of Categories in the bracket "[categories]".

then add an onclick setstate product in your link.

so when you click your link, the categories state is updated. then because the bracket inside useEffect that have [categories] is updated the useEffect is run. hence fething new product.

Arnoud0
Related