CODEWITHSUNDEEP
javascriptreactjs
Sergey V.
Sergey V.

Reputation: 11

After adding in Array element change oher element but not adding to array

i've got an array:

dataSet: [
{ name: "Имя1", image: "img.jpeg", author: "Александр Полтавченко", date: "21.02.2020", id: 1 },
      { name: "Имя2", image: "img.png", author: "Александр Полтавченко", date: "21.02.2020", id: 2 },
],
addedToCart: []

and here is the function which put value from dataSet to addedToCart according ID from props:

added =  (id) => {

  this.setState (( { addedToCart, dataList  } )=>{

  const newItem = dataList.filter(el=>el.id===id);
  const testArr = [...addedToCart ];
  const filteredATC = testArr.filter((item, el)=>{
    if(addedToCart.indexOf(item)===el){
      item.count++
     return item, el
  }
  else {
    return item
  }

it is works well (only one element with count ++) but if click add to another element it is just change element in array (with correct count surprisingly). How to put another element into addedToCart, just like

[
{el1},
{el2}
]

Upvotes: 0

Views: 37

Answers (1)

buzatto
buzatto

Reputation: 10382

filter returns an array instead of the desired element, you should use find instead.

I believe you would desire an approach like this:

added = (id) => {

  this.setState (( { addedToCart, dataList } ) => {

    const newItem = dataList.find(el=> el.id === id);
    const testArr = [...addedToCart ];
    const filteredATCIndex = testArr.findIndex((_item, id) => newItem.id === id)

    // if there is an added item
    if (filteredATCIndex !== -1) {
      const count = testArr[filteredATCIndex].count + 1
      testArr[filteredATCIndex] = { ...testArr[filteredATCIndex], count }
      return { addedToCart: testArr }
    }

    // for new item
    const newItemAdded = { ...newItem, count: 1 }
    testArr.push(newItemAdded)
    return { addedToCart: testArr }
  })
}

though this approach duplicates data, which is not desirable. I suggest you consider to change addedToCart to an object where key value pairs are the id and count respectively from added items. This way you would avoid duplicating data.

then your update state would look like:

added = (id) => {
  this.setState (( { addedToCart } ) => {
    const count = typeof addedToCart[id] === 'undefined' ? 1 : ++addedToCart[id]

    return { addedToCart: { ...addedToCart, [id]: count } }
  })
}

Upvotes: 1

Related Questions