Question 74312 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to subtract values from one array of objects from another array of object using the same ID in REACT JS – Reactjs

I have two arrays of objects.
I’m trying to create a function that can subtract values from one array of objects from another array of object using the same id on name in REACT

export default function App() {
  const stockArray = [
    { id: 1, name: "Iphone", amount: 23 },
    { id: 2, name: "Samsung", amount: 28 },
    { id: 3, name: "Huawei", amount: 14 },
    { id: 4, name: "Motorola", amount:20 }
  ];

   const basketArray = [
    { id: 1, name: "Iphone", amount: 3 },
    { id: 3, name: "Huawei", amount: 4 }
   ];

   const [stock, setStock] = React.useState(stockArray);
   const [basket, setBasket] = React.useState(basketArray);   

   const handleUpdateStock = () => {
    // How to subtract amount values in basketArray from amount values in stockArray

in objects with the same id or name.

    // the result should be :

   // const stockArray = [
   //   { id: 1, name: "Iphone", amount: 20 },
   //   { id: 2, name: "Samsung", amount: 28 },
  //   { id: 3, name: "Huawei", amount: 10 },
  //   { id: 4, name: "Motorola", amount:20 }
  //  ];

   }
  return (
    <div>
      <h3>Stock:</h3>
          {stock.map(product=> (
            <h5>{product.name} - {product.amount} </h5>
          ))}
      <br/>
      <h3>Basket:</h3>
          {basket.map(product=> (
            <h5>{product.name} - {product.amount} </h5>
          ))}
      <button onClick={handleUpdateStock}>Save and update stock </button>
    </div>

  );
}`
Tags:

2

Answers


  1. 0 
    function substract (stockArray,basketArray){
  return stockArray.map(stock=>{
    const basket = basketArray.find(basket=>stock.id===basket.id);
      if(basket){
        return {
          ...stock,
          amount:stock.amount-basket.amount,
        }
      } else {
        return stock;
      }
 })
}

    this function iterates all indexes in stockArray, will find same object with the same id in basketArray and if basket is an object, it changes value of amount in stock

    Login or Signup to reply.
  2. 0

    You can loop your stock array, and compare each product with in it with each product from the basket.

    If they have the same id you should subtract the amount from the product.amount from the the product inside the basket.

    In the end we should setStock with the new array.

    function App() {
  const stockArray = [
    { id: 1, name: "Iphone", amount: 23 },
    { id: 2, name: "Samsung", amount: 28 },
    { id: 3, name: "Huawei", amount: 14 },
    { id: 4, name: "Motorola", amount:20 }
    ];

  const basketArray = [
    { id: 1, name: "Iphone", amount: 3 },
    { id: 3, name: "Huawei", amount: 4 }
    ];

  const [stock, setStock] = React.useState(stockArray);
  const [basket, setBasket] = React.useState(basketArray);   

  const handleUpdateStock = () => {
    const newStock = stock.map(product => {
      const productInBasket = basket.find(el => el.id === product.id);
      
      if (!productInBasket) return product;
      
      return {
        ...product,
        amount: product.amount - productInBasket.amount,
      }
    })
    
    setStock(newStock);
  }
  return (
    <div>
      <h3>Stock:</h3>
      {stock.map(product=> (
        <h5 key={product.id}>{product.name} - {product.amount} </h5>
      ))}
      <br/>
      <h3>Basket:</h3>
      {basket.map(product=> (
        <h5 key={product.id}>{product.name} - {product.amount} </h5>
      ))}
      <button onClick={handleUpdateStock}>Save and update stock </button>
    </div>
    );
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);
    <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search