Click here to Skip to main content
15,906,816 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,

I'm making a demo game store app using React JS, and when I add a game to my cart, I want a toast notification popping up saying, 'A new game has been added to cart' or something.

So I installed <pre lang="Javascript">react-toastify and in my addToCart function, after all the lines of other code, I put:
toast("A new game has been added to your cart");

And I clicked on the add to cart button and it didn't give me a toast notification at all. This is my repository on GitHub. The problem is on Products.jsx. Here's the code where I'm stuck:

const addToCart = (product) => {
    let newCart = [...cart];
    let itemInCart = newCart.find((item) => product.name === item.name);

    if (itemInCart) {
      itemInCart.quantity++;
    } else {
      itemInCart = {
        ...product,
        quantity: 1,
      };
      newCart.push(itemInCart);
    }

    setCart(newCart);
    toast("A new game has been added to your cart");
  };


I'm calling it here:

return (
    <>
      <h1>Home</h1>
      <div className="idk">
        <ul className="flex cards">
          {products.map((product, index) => (
            <li key={index}>
              <h2>{product.name}</h2>
              <div className="space3"></div>
              <img src={product.image} alt={product.name} />
              <div className="space"></div>
              <div className="thiscard">
                <button onClick={() => (window.location.href = product.link)}>
                  Buy
                </button>
              </div>
              <h4>${product.cost}</h4>
              <div className="cart-container">
                <div className="space2"></div>
                <div className="anotheridk">
                  <a className="cart" onClick={() => addToCart(product)}>
                    <FaCartPlus />
                  </a>
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </>
  );


Please help, thank you!

What I have tried:

I've tried re-looking my code and it doesn't help.
Posted
Updated 7-Nov-20 2:51am
v4
Comments
Richard MacCutchan 6-Nov-20 11:38am    
"Please help, thank you!"
If you want help then post the appropriate code in your question. No one is going to download and analyse your project from github.
h311o 6-Nov-20 22:37pm    
Updated question. Could you help, please?
Richard MacCutchan 7-Nov-20 3:47am    
Sorry, but I have not used this product.
h311o 7-Nov-20 7:39am    
Oh...also a possibly helpful tip, when I replace
toast("A new game has been added to your cart");
with
alert("A new game has been added to your cart");
it gives an alert. So maybe it has something to do with toast...?

1 solution

 
Share this answer
 
Comments
h311o 8-Nov-20 0:53am    
Oh, right. I had to do
toast.configure()
before I actually use toast. Thanks Richard!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900