Add to Cart function ReactJS

Hi, I’m new to React and trying to learn it.
I have 2 different arrays of menu items:

export const crepes = [
    { "id": "1", image: baconCrepe, title: "Bacon", 
    description: 'Mozzarella, grilled chicken, fried bacon, fresh tomatoes, BBQ sauce, spinach, arugula', price: '5$'},
    { "id": "2", image: fourCheeseCrepe, title: "4 cheese", 
    description: 'Mozzarella, gorgonzola, camembert, parmesan, white sauce, arugula', price: '5$'},
    { "id": "3", image: nutellaCrepe, title: "Nutella", 
    description: 'Nutella, Oreo bisquits, strawberries', price: '5$'},
    { "id": "4", image: salmonCrepe, title: "Salmon", 
    description: 'Philadelphia cheese, fresh salmon, avocado, fresh cucumber', price: '5$'},
    { "id": "5", image: vegeSalad, title: "Vege salad", 
    description: 'Beetroot marinated in honey, Halloumi cheese, pomegranate seeds, lamb`s lettuce, cashew nuts', price: '5$'},
    { "id": "6", image: coleslowSalad, title: "Coleslow salad", 
    description: 'Cabbage, lime juice, mayonnaise, lemongrass, coriander', price: '5$'}
]

export const burgers = [
    { "id": "1", image: cranberryBurger, title: "Cranberry", 
    description: '100% Beef, Camembert, cranberry sauce, red onion, arugula, lamb`s lettuce', 
    price: '5$'},
    { "id": "2", image: italianTaste, title: "Italian taste", 
    description: '100% Beef, mascarpone, black olives, dried tomatoes, red onion, arugula, iceberg lettuce', price: '4$'},
    { "id": "3", image: mushroomBurger, title: "Mushroom", 
    description: '100% beef, mushrooms in sour cream, red onion, arugula, cheddar, iceberg lettuce', price: '4$'},
    { "id": "4", image: seasonalBurger, title: "Seasonal", 
    description: '100% beef, tomato sauce, asparagus, red onion, iceberg lettuce, lamb`s lettuce', price: '5$'},
    { "id": "5", image: vegeBurger, title: "Vege", 
    description: 'Halloumi cheese, red onion, beetroot marinated in honey, homemade sauce, sunflower sprouts, lamb`s lettuce', price: '5$'},
]

They are displayed in the Menu component like this:

<TabPanel>
        <div className="burgers">
          <ul> 
          {burgers.map(burger => (
            <li key={burger.id}>
            <h4>{burger.title}</h4>
            <span>{burger.price}</span>
            <img src={burger.image} alt={burger.title} />
            <p>{burger.description}</p>
            <button type="submit" onClick={() => addToCart()}>Add to cart</button>
            </li>
            ))}
          </ul>
        </div>
    </TabPanel>
    <TabPanel>
      <div className="crepes">
          <ul>
          {crepes.map(crepe => (
            <li key={crepe.id}>
              <h4>{crepe.title}</h4>
              <span>{crepe.price}</span>
              <img src={crepe.image} alt={crepe.title} />
              <p>{crepe.description}</p>
              <button type="submit" onClick={() => addToCart()}>Add to cart</button>
            </li>
            ))}
          </ul>
        </div>
  </TabPanel>

I want to add a function which will add selected items to the cart and execute it on a button click. In examples I saw it was a simple array with 3-4 of items, easily accessible, so I’m struggling a bit with mine.

When you map over your collection in React, you can add property of each individual item, this means also to addtoCart.

For example when you map over burgers you can add the ID and the type to addToCart

 <button type="submit" onClick={() => addToCart(burger.id, "burger")}>Add to cart</button>

So that in your handler you can simply detect the type, get the element from the unique id and then add it to your “cart” collection.

Hope it helps :sparkles:

2 Likes

I have also this

const [cart, setCart] = useState([]);
 const addToCart = (el) => setCart((currentCart) => [...currentCart, el]);

Thanks to you, I made it to save items id to cart array. I have Cart itself in another Component. How to make it show, for example title, picture and price of selected items?

Standard React: data “flows down” so have this information reach your component via props using a common ancestor.
If not, you can use context as a last resort.

1 Like