CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-router
MUSIC HOLIC
MUSIC HOLIC

Reputation: 88

In React how to get the information of the element on which we are clicking

Hey i am working on making an e commerce website i am using react to make it by using json file i imported data from it and the data is like image, title, price etc now i use

<Route path="/product/:productId">
          <Header/>
          <ProductInfo/>
        </Route>

and on my home page where i have listed all the products i use Link feature from react-router-dom to wrap all products like this

<Link className="product__info" to={`/product/${productDetails.id}`}>

                           <p >{productDetails.title}</p>
                            <p className="product__price">
                                <small>$</small>
                                {productDetails.price}
                            </p>
                            <div className="product__rating">
                                {
                                    Array(productDetails.rating)
                                        .fill()
                                        .map((_) => (
                                            <p>⭐</p>
                                        ))
                                }
                            </div>
                        </Link>
                        </div>
                        <Link to={`/product/${productDetails.id}`}>
                        <img className="yeimagehai" src={productDetails.image} alt="" />
                        </Link>

Note: I have imported data from json as productDetails so now if any one click on any product my url changes to localhost:3000 to localhost:3000/product/{whatever my product id is} all thing is going fine till now but can anyone tell me that how can i get the image , title , price etc of on whatever object i am clicking in link i am getting correct id of my products like http://localhost:3000/product/49538097 but how do i get others details too please tell me??

Upvotes: 1

Views: 848

Answers (2)

Prateek Thapa
Prateek Thapa

Reputation: 4938

  1. Take the productId from the url params by using useParams hook from react-router-dom.
  2. Call the API and fill the state.
function ProductDetails() {
   const { productId } = useParams();
   const [product, setProduct] = React.useState(null);

   React.useEffect(() => {
     async function fetchProduct() {
       const data = await apiCallToFetchProduct();
       setProduct(data);
    }
     
     fetchProduct();
   }, []);

  return /**JSX**/
}

NOTE

There's no point passing props from Link component or using context since on page reload, the data vanishes. You have to make a fresh API call every time the user enters the product page.

Upvotes: 2

Nja
Nja

Reputation: 489

you can pass props like this:

<Link className="product__info" to={`/product/${productDetails.id}`} productProps={productDetails}>

and in the component receiving props you will find them in:

props.location.productProps

Upvotes: 0

Related Questions