title: React helpers to react components
body: <p>I have created a helpers function to reuse.
  On my first component the helper functions is working well.
  But when I use it on the other component. It's having a bug that when I add products to favorites it adds to the favorites but when I click on the other products it overwrite the previously added favorites.</p>
  <p>my helpers</p>
  <pre class="lang-js prettyprint-override"><code>function getFromLocalStorage(key) {
    return JSON.parse(localStorage.getItem(key))
  }
  
  export function setToLocalStorage(key, data) {
    return localStorage.setItem(key, JSON.stringify(data))
  }
  
  export const favoriteProductsStorageKey = &quot;favorites_products&quot;
  
  export function getAllFavoriteProducts() {
    return getFromLocalStorage(favoriteProductsStorageKey) || []
  }
  
  export function createFavoriteHelpers(favorites, setFavorites) {
  
    function addFavorite(product) {
      const isProductAlreadyFavorite = isProductInFavorites(product);
  
      if (isProductAlreadyFavorite) return;
  
      const newFavoriteProducts = [...favorites, product];
  
      setFavorites(newFavoriteProducts);
      setToLocalStorage(favoriteProductsStorageKey, newFavoriteProducts);
    }
  
    function removeFavorite(product) {
      const newFavoriteProducts = favorites.filter(
        (iteratedProduct) =&gt; iteratedProduct._id !== product._id
      );
  
      setFavorites(newFavoriteProducts);
      setToLocalStorage(favoriteProductsStorageKey, newFavoriteProducts);
    }
  
    function isProductInFavorites(product) {
      return favorites.some(
          (iteratedProduct) =&gt; iteratedProduct._id === product._id
      );
    }
  
    return {
      addFavorite,
        removeFavorite,
        isProductInFavorites,
    };
  }
  </code></pre>
  <p>my 1st component that is working so well.</p>
  <pre class="lang-js prettyprint-override"><code>const ProductList = ({ products }) =&gt; {
    const classes = useStyles()
  
    const [favorites, setFavorites] = useState(getAllFavoriteProducts())
    const favoriteHelpers = createFavoriteHelpers(favorites, setFavorites)
  
    return (
      &lt;&gt;
        &lt;div className={classes.root}&gt;
          {products?.map((product) =&gt; {
            return (
              &lt;div className=&quot;ProductCard&quot; key={product._id}&gt;
                &lt;div&gt;
                  &lt;Link to=&quot;/shop&quot; state={{ shop: product.shop }}&gt;
                    &lt;img
                      className=&quot;ProductImage&quot;
                      src={product.imagePrimary}
                      alt={product.name}
                    /&gt;
                  &lt;/Link&gt;
                  &lt;div className=&quot;FavButton&quot;&gt;
                    {favoriteHelpers.isProductInFavorites(product) ? (
                      &lt;FavoriteIcon
                        fontSize=&quot;small&quot;
                        style={{ fill: &quot;red&quot; }}
                        onClick={() =&gt; favoriteHelpers.removeFavorite(product)}
                      /&gt;
                    ) : (
                      &lt;FavoriteIcon
                        fontSize=&quot;small&quot;
                        style={{ fill: &quot;gray&quot; }}
                        onClick={() =&gt; favoriteHelpers.addFavorite(product)}
                      /&gt;
                    )}
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className=&quot;ProductCardDetails&quot;&gt;
                  &lt;div className=&quot;NameAndPrice&quot;&gt;
                    &lt;div className=&quot;ProductName&quot;&gt;{product.name}&lt;/div&gt;
                    &lt;div className=&quot;ProductPrice&quot;&gt;P{product.price}&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;Description&quot;&gt; by {product.shop.name}&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            )
          })}
        &lt;/div&gt;
      &lt;/&gt;
    )
  }
  
  export default ProductList
  </code></pre>
  <p>the one that is having a bug on adding and removing.</p>
  <pre class="lang-js prettyprint-override"><code>const ProductCard = ({ data }) =&gt; {
  
    const [favorites, setFavorites] = useState(getAllFavoriteProducts())
    const favoriteHelpers = createFavoriteHelpers(favorites, setFavorites)
  
    return (
      &lt;div className=&quot;ProductCard&quot;&gt;
        &lt;div&gt;
          &lt;Link to=&quot;/product&quot; state={{ product: data }}&gt;
            &lt;img
              className=&quot;ProductImage&quot;
              src={data.imagePrimary}
              alt={data.name}
            /&gt;
          &lt;/Link&gt;
          &lt;div
            aria-hidden=&quot;true&quot;
            className=&quot;AddButton&quot;
            onClick={() =&gt; {
              addToBag(data)
              // useAddToBag(data)
            }}
            onKeyDown={() =&gt; {
              addToBag(data)
            }}
          &gt;
            &lt;AddIcon fontSize=&quot;small&quot; /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;FavButton&quot;&gt;
            {favoriteHelpers.isProductInFavorites(product) ? (
              &lt;FavoriteIcon
                fontSize=&quot;small&quot;
                style={{ fill: &quot;red&quot; }}
                onClick={() =&gt; favoriteHelpers.removeFavorite(product)}
              /&gt;
            ) : (
              &lt;FavoriteIcon
                fontSize=&quot;small&quot;
                style={{ fill: &quot;gray&quot; }}
                onClick={() =&gt; favoriteHelpers.addFavorite(product)}
              /&gt;
            )}
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div className=&quot;ProductCardDetails&quot;&gt;
          &lt;div className=&quot;NameAndPrice&quot;&gt;
            &lt;div className=&quot;ProductName&quot;&gt;{data.name}&lt;/div&gt;
            &lt;div className=&quot;ProductPrice&quot;&gt;P{data.price}&lt;/div&gt;
          &lt;/div&gt;
          &lt;div className=&quot;Description&quot;&gt; {data.description}&lt;/div&gt;
        &lt;/div&gt;
        &lt;AddToBagDialog
          showDialog={dialogState.showDialog}
          message={dialogState.dialogMessage}
          onGotoBag={() =&gt; {
            setDialogState((prevState) =&gt; ({
              ...prevState,
              showDialog: false,
            }))
            navigate(&quot;/bagpage&quot;)
          }}
          onAddMoreProducts={() =&gt; {
            setDialogState((prevState) =&gt; ({
              ...prevState,
              showDialog: false,
            }))
          }}
        /&gt;
        &lt;ConfirmationDialog
          showDialog={confirmDialogState.showDialog}
          message={confirmDialogState.dialogMessage}
          onConfirm={() =&gt; {
            updateBag([])
            updateBag((prevState) =&gt; [...prevState, product])
            setConfirmDialogState((prevState) =&gt; ({
              ...prevState,
              showDialog: false,
            }))
            setDialogState((prevState) =&gt; ({
              ...prevState,
              showDialog: true,
              dialogMessage: &quot;Product added to bag&quot;,
              isError: false,
            }))
          }}
          onDecline={() =&gt; {
            setConfirmDialogState((prevState) =&gt; ({
              ...prevState,
              showDialog: false,
            }))
          }}
        /&gt;
      &lt;/div&gt;
    )
  }
  
  export default ProductCard
  </code></pre>
  <p>While using Local storage the ProductList is working correctly when adding and removing to favorites, but on the ProductCard it is replacing the ones added before when adding a favorite.</p>
  <p>Here <a href="https://codesandbox.io/s/empty-river-jm94p?file=/src/components/Homemade/SearchPage/ProductList/index.js" rel="nofollow noreferrer">example</a></p>