CODEWITHSUNDEEP
javascriptreactjs
Ati
Ati

Reputation: 304

ReactJS Add to Cart function

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, something like this:

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

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

Is there a way to "compile" those burgers and crepes together so I can add them to the cart? In examples I watched it was a simple array from a couple of items, easily accessible, so I'm struggling a bit with mine.

Upvotes: 1

Views: 801

Answers (2)

Olivier Boiss&#233;
Olivier Boiss&#233;

Reputation: 18153

crepes and burgers objects have the same shape (containing id, image, title, description, price fields), they could be stored into the same array.

You just need to pass the item to addToCart function.

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


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

// crepe button
<button type="submit" onClick={() => addToCart(crepe)}>Add to cart</button>

Upvotes: 0

Ati
Ati

Reputation: 304

So a solution that helped me was in next:

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

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

It's basically the identification Rawk mentioned.

Upvotes: 1

Related Questions