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

Question

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}
]

Rafael Buzatto de Campos · Accepted Answer · 2021-03-15 01:47:55Z

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 } }
  })
}

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related