title: Alternative for "for loop" for checking corresponding ID's
body: <p>I have a <code>products array</code> - an array containing objects of a range of products - and I have an <code>subscriptionItems array</code> - which contains all the items a user adds to their shopping cart. Both arrays use useState.</p>
  <p>My function <code>addItem</code> takes an object from the <code>products array</code>, and adds it to the <code>subscriptionItems array</code>. However, if the added product is already in the <code>subscriptionItems array</code>, the item won't be added again, but the amount of the product object will be increased, based on the second if statement.</p>
  <pre><code>const [products, setProducts] = useState(data);
  const [subscriptionItems, setSubscriptionItems] = useState(initialSubscriptionProducts)
  
  const addItem = (itemId) =&gt; {
      let len = products.length;
      for (let i = 0; i &lt; len; i++) {
        if (products[i].id === itemId) {
          let lenSub = subscriptionItems.length;
          for (let j = 0; j &lt; lenSub; j++) {
            if (subscriptionItems[j].id === itemId) {
              setSubscriptionItems(
                (subscriptionItems[j].amount = subscriptionItems[j].amount + 1)
              );
            } else {
              setSubscriptionItems((prevArray) =&gt; [...prevArray, products[i]]);
            }
          }
        }
      }
    };
  </code></pre>
  <p>The problem is that the product will be added as often as the for loop is completed, which is never when the initial <code>subscriptionItems</code> array is empty. I only want to add or increase the product once, but I really don't know an alternative way to do this. Any help would be appreciated.</p>