Merge pull request #1 from Chandan9898Kumar/NewRepo

Feat: Added new repo which depicts update and remove of data.

src/App.js

@@ -2,21 +2,20 @@ import './App.css';
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Homes from './Home';
 import ObjectForm from './Components/ObjectsChanges';
-import StateList from './Components/StateChanges'
+import StateList from './Components/StateChanges';
+import ShoppingCart from './Components/UpdateCart'
 function App() {
   return (
     <div className="App">
-    <BrowserRouter>
-      <Routes>
-        <Route   exact path='/' element={<Homes />} />
-        <Route   exact path='/ObjectChange'  element={<ObjectForm />}    />
+      <BrowserRouter>
+        <Routes>
+          <Route exact path='/' element={<Homes />} />
+          <Route exact path='/ObjectChange' element={<ObjectForm />} />
+          <Route exact path='/StateChange' element={<StateList />} />
+          <Route exact path='/ShpingCart' element={<ShoppingCart />} />
+        </Routes>
+      </BrowserRouter>
 
-        <Route   exact  path='/StateChange' element={<StateList  />}  />
-
-
-      </Routes>
-    </BrowserRouter>
-
     </div>
   );
 }

src/Components/UpdateCart.js

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+
+const initialProducts = [{
+    id: 0,
+    name: 'Baklava',
+    count: 1,
+}, {
+    id: 1,
+    name: 'Cheese',
+    count: 5,
+}, {
+    id: 2,
+    name: 'Spaghetti',
+    count: 2,
+}];
+
+const ShoppingCart = () => {
+    const [products, setProducts] = useState(initialProducts)
+
+
+    // Update an item in the shopping cart
+    function handleIncreaseClick(productId) {
+        setProducts(products.map((item) =>{
+          if(item.id===productId){
+            return {...item,count:item.count+1}
+          }else{
+            return item
+          }
+        }))
+
+        //       OR We can do it like below as well   .
+
+        // const data = products.map((item) => {
+        //     if (item.id === productId) {
+        //         return { ...item, count: item.count + 1 }
+        //     } else {
+        //         return item
+        //     }
+        // })
+        // setProducts(data)
+
+    }
+
+    //
+    const handleDecreaseClick =(ProductId)=>{
+        const data=products.map((item)=>{
+          if(item.id===ProductId){
+                return {...item,count:item.count-1}
+              }else{
+                return item
+              }
+        })
+        //     if your count is 0 then that item should be removed, uncomment below and check.
+
+        // const result=data.filter((item)=> item.count>0)
+        // setProducts(result)
+        setProducts(data)
+
+
+
+        // setProducts(products.map((item) =>{
+        //   if(item.id===productId){
+        //     return {...item,count:item.count+1}
+        //   }else{
+        //     return item
+        //   }
+
+        // }))
+      }
+
+    return (
+        <ul>
+            {products.map(product => (
+                <li key={product.id}>
+                    {product.name}
+                    {' '}
+                    (<b>{product.count}</b>)
+                    <button onClick={() => {
+                        handleIncreaseClick(product.id);
+                    }}>
+                        +
+                    </button>
+                    <button onClick={() => {
+                        handleDecreaseClick(product.id);
+                    }}>
+                        -
+                    </button>
+                </li>
+            ))}
+        </ul>
+    );
+}
+export default ShoppingCart;

src/Home.js

@@ -1,14 +1,13 @@
 import React from 'react'
 import { NavLink } from "react-router-dom"
-const Homes=()=>{
-return(
-<>
-<label>Home page</label><br /><br />
-<NavLink to='/ObjectChange'>Change Nested Object</NavLink><br /><br />
-<NavLink to='/StateChange'>Change Nested State</NavLink><br /><br />
-
-
-</>    
-)
+const Homes = () => {
+    return (
+        <>
+            <label>Home page</label><br /><br />
+            <NavLink to='/ObjectChange'>Change Nested Object</NavLink><br /><br />
+            <NavLink to='/StateChange'>Change Nested State</NavLink><br /><br />
+            <NavLink to='/ShpingCart'>Change Nested State of Cart</NavLink><br /><br />
+        </>
+    )
 }
 export default Homes