CODEWITHSUNDEEP
javascriptreactjs
Chen
Chen

Reputation: 291

How can you add to cart only if matching product id?

I'm trying to add an item to a list only if that item matches the id. Meaning that only one item would get added to the cart. I've tried doing this in a couple of ways but can't seem to find a way for react to detect my item's id.

Here is my code: I'm trying to map through my data's file which is where I have the info about the product and then with that info if it matches the id, I'm trying to push it to the item's array. But this does nothing...

import React, {useState, useContext} from 'react'
import data from './data.js'
import useCountsContext from './context/useCountsContext.js'
var uniqid = require('uniqid');

function Shop({ data }) {
  const {products} = data
  const {count, setCount} = useContext(useCountsContext)
  const [item, setItem] = useState([])

  const addCart = (products) => {
      setCount(count + 1)
      data.map((product) => {
        if (product.id === data.id) {
          setItem(item.push(product))
        }
      })
  }


    return (
        <div>
          <h1>Shop</h1>
          <div className="div___shop">
          {data.map(({img, button}) => (
            <>
              <img className="img___shop" key={data.id} src={img}></img>
              <div key={data.id}>
                <button onClick={addCart}>{button}</button>
              </div>
            </>
          ))}
          </div>
        </div>
    )
}

export default Shop

Yes this is my data object:

import diCaprio from './img/diCaprio.jpg'
import steveJobs from './img/steveJobs.jpg'
import lips from './img/lips.jpg'
import buda from './img/buda.jpg'
import spaceDog from './img/spaceDog.jpg'
import astroNube from './img/astroNube.jpg'
import banksy from './img/Banksy.jpg'
import banksyDJ from './img/banksyDJ.jpg'
var uniqid = require('uniqid');


const data = [{
  id: uniqid(),
  title: "Steve Jobs",
  img: steveJobs,
  homeImg: steveJobs,
  button: "add to cart"
},
{
  id: uniqid(),
  img: diCaprio,
  homeImg: diCaprio,
  button: "add to cart"
},
{
  id: uniqid(),
  img: lips,
  homeImg: lips,
  button: "add to cart"
},
{
  id: uniqid(),
  img: buda,
  homeImg: buda,
  button: "add to cart"
},
{
  id: uniqid(),
  img: spaceDog,
  button: "add to cart"
},
{
  id: uniqid(),
  img:astroNube,
  button: "add to cart"
},
{
  id: uniqid(),
  img: banksy,
  button: "add to cart"
},
{
  id: uniqid(),
  img:banksyDJ,
  button: "add to cart"
}
]

export default data;

Upvotes: 0

Views: 539

Answers (1)

Apostolos
Apostolos

Reputation: 10498

First of all, your data object doesnt have a products property so this line of code for object destructuring is useless.

  const {products} = data

You need to change your button to pass the id on click

      {data.map(({id, img, button}) => (
        <>
          <img className="img___shop" key={id} src={img}></img>
          <div key={id}>
            <button onClick={() => addCart(id)}>{button}</button>
          </div>
        </>
      ))}

and then handle it accordingly in your method

  const addCart = (productId) => {
      setCount(count + 1)
      data.forEach((product) => {
        if (product.id === productId) {
          setItem(item.push(product))
        }
      })
  }

Also, you don't need map in this iteration but forEach

Upvotes: 1

Related Questions