title: How can I add the item to cart page in react
body: <p>I am trying to add the items to a cart page when a user clicks the add to cart button.</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;bootstrap&quot;;
  import { useParams } from &quot;react-router-dom&quot;;
  
  function ItemDetail(handleClick) {
    const params = useParams();
    let { productCode, vendor, value}  = params;
    let item = {productCode, vendor, value};
  
    console.log(item);
  
    return (
      &lt;&gt;
        &lt;div&gt;
          &lt;p&gt;product id: {productCode}&lt;/p&gt;
          &lt;p&gt;price: {value}&lt;/p&gt;
          &lt;p&gt;vendor: {vendor}&lt;/p&gt;
          &lt;button onClick={() =&gt; handleClick(item)}&gt;Add to Cart&lt;/button&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  
  export default ItemDetail;
  </code></pre>
  <p>This is the cart page. Where I am to, render the item details from <strong>Item Details</strong> Page.</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  
  const Cart = ({ cart, setCart, handleChange }) =&gt; {
    const [price, setPrice] = useState(0);
  
    const handleRemove = (id) =&gt; {
      const arr = cart.filter((item) =&gt; item.id !== id);
      setCart(arr);
      handlePrice();
    };
  
    const handlePrice = () =&gt; {
      let ans = 0;
      cart.map((item) =&gt; (ans += item.amount * item.price));
      setPrice(ans);
    };
  
    useEffect(() =&gt; {
      handlePrice();
    });
  
    console.log(setCart);
  
    return (
      &lt;article&gt;
        {cart.map((item) =&gt; (
          &lt;div className=&quot;cart_box&quot; key={item.id}&gt;
            &lt;div&gt;
              &lt;button onClick={() =&gt; handleChange(item, 1)}&gt;+&lt;/button&gt;
              &lt;button&gt;{item.amount}&lt;/button&gt;
              &lt;button onClick={() =&gt; handleChange(item, -1)}&gt;-&lt;/button&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;span&gt;{item.price}&lt;/span&gt;
              &lt;button onClick={() =&gt; handleRemove(item.id)}&gt;Remove&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        ))}
        &lt;div className=&quot;total&quot;&gt;
          &lt;span&gt;Total Price of your Cart&lt;/span&gt;
          &lt;span&gt;R - {price}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/article&gt;
    );
  };
  
  export default Cart;
  </code></pre>
  <p>This is my item description page. I have fetched the items using params, this is only way I found easier for me.</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import { Row, Col } from &quot;react-bootstrap&quot;;
  import StyledCard from &quot;../components/Card&quot;;
  
  const Discover = (props, params, handleClick) =&gt; {
    const token = &quot;not-the-actual-token&quot;;
    const [result, setResult] = useState([]);
  
    useEffect(() =&gt; {
      fetch(
        &quot;https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/product/&quot;,
        {
          method: &quot;GET&quot;,
          headers: { Authorization: `Bearer ${token}` },
        }
      )
        .then((res) =&gt; res.json())
        .then((json) =&gt; setResult(json));
    }, []);
  
    const cardStyle = {
      listStyle: &quot;none&quot;,
      margin: 5,
      paddingLeft: 0,
      minWidth: 240,
    };
    return (
      &lt;&gt;
        &lt;div className=&quot;latestdeals container my-5&quot;&gt;
          &lt;h1&gt;All Products&lt;/h1&gt;
          &lt;Row className=&quot;hotcards&quot;&gt;
            &lt;Col className=&quot;colcard&quot;&gt;
              {(result?.result || []).map((item) =&gt; (
                &lt;div key={item.productCode} style={cardStyle}&gt;
                  &lt;a href={`/itemDetail/${item.productCode}/${item.value}/${item.vendor}`}&gt;
                    {&quot; &quot;}
                    &lt;StyledCard
                      key={item.productCode}
                      name={item.vendor}
                      title={item.description}
                      price={item.value}
                      handleClick={handleClick}
                      item={item}
                    /&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
              ))}
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default Discover;
  </code></pre>
  <p>This is my App page</p>
  <pre><code>import &quot;./index.scss&quot;;
  import React, { useState } from &quot;react&quot;;
  import {
    BrowserRouter as Router,
    Route,
    Routes,
    useParams,
  } from &quot;react-router-dom&quot;;
  import AllCategories from &quot;./pages/all-catergories&quot;;
  import Home from &quot;./pages/home&quot;;
  import Entertainment from &quot;./pages/entertainment&quot;;
  // import Cart from &quot;./pages/_cart&quot;;
  import Login from &quot;./pages/login&quot;;
  import Netflix from &quot;./pages/netflix&quot;;
  import Orders from &quot;./pages/orders&quot;;
  import SignUp from &quot;./pages/sign-up&quot;;
  // import Data2 from &quot;./Data2&quot;;
  import Products from &quot;./pages/products&quot;;
  // import Shop from &quot;./components/Shop&quot;;
  // import ProductDetail from &quot;./pages/ProductDetail&quot;;
  import Discover from &quot;./pages/discover&quot;;
  import ItemDetail from &quot;./pages/itemDetail&quot;;
  import Cart from &quot;./pages/cart&quot;;
  
  function App() {
    const [show, setShow] = useState(true);
    const [cart, setCart] = useState([]);
  
    const handleClick = (item) =&gt; {
      if (cart.indexOf(item) !== -1) return;
      setCart([...cart, item]);
    };
  
    const handleChange = (item, d) =&gt; {
      const ind = cart.indexOf(item);
      const arr = cart;
      arr[ind].amount += d;
  
      if (arr[ind].amount === 0) arr[ind].amount = 1;
      setCart([...arr]);
    };
  
    return (
      &lt;Router&gt;
        &lt;Routes&gt;
          &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
          &lt;Route path=&quot;all-categories&quot; exact element={&lt;AllCategories /&gt;} /&gt;
          {/* &lt;Route path=&quot;cart&quot; exact element={&lt;Cart /&gt;} /&gt; */}
          &lt;Route path=&quot;entertainment&quot; exact element={&lt;Entertainment /&gt;} /&gt;
          &lt;Route path=&quot;login&quot; exact element={&lt;Login /&gt;} /&gt;
          &lt;Route path=&quot;discover&quot; exact element={&lt;Discover /&gt;} /&gt;
          &lt;Route path=&quot;netflix&quot; exact element={&lt;Netflix /&gt;} /&gt;
          &lt;Route path=&quot;orders&quot; exact element={&lt;Orders /&gt;} /&gt;
          &lt;Route path=&quot;sign-up&quot; exact element={&lt;SignUp /&gt;} /&gt;
          &lt;Route path=&quot;products&quot; element={&lt;Products /&gt;} /&gt;
          &lt;Route path=&quot;/itemDetail/:productCode/:value/:vendor&quot; element={&lt;ItemDetail /&gt;} /&gt;
          &lt;Route path=&quot;/itemDetail/&quot; element={&lt;ItemDetail handleClick={handleClick}  /&gt;} /&gt;
          &lt;Route path=&quot;/Cart/&quot; exact element={&lt;Cart cart={cart} setCart={setCart} handleChange={handleChange}/&gt;} /&gt;
        &lt;/Routes&gt;
      &lt;/Router&gt;
    );
  }
  
  export default App;
  </code></pre>