Update property of single object in temporary state array

App Building
#1

Hello,

I'm using array.find to find the object in a temporary state array that matches a given packinglistno and packno. I'm doing this from a JS Query.
After finding a match, I want to change the value of property "scanned" for that specific object to true.'

var packToUpdate = packsArray.value.find(packItem => packItem.pack === pack)
    
    if (packToUpdate && packsArray.value['0'].packinglist === packinglist) {
      // packinglist and packno match and not scanned yet - update pack to true
      packToUpdate.scanned = true
      console.log(`Updated scanned value for pack ${pack}`)
    } else if (packToUpdate && packToUpdate.packinglist === packinglist && packToUpdate.scanned === true) {
      // match, but already scanned
      console.log('Already scanned!')
    } else if (packToUpdate && packToUpdate.packinglist != packinglist) {
      // pack match but packinglist doesn't match SHOW POPUP
      console.log('Wrong packinglist no!')
    } else {
      // no match packinglist and pack
      console.log(`Could not find pack with packlist ${packinglist} and pack ${pack}`)
    }
  console.log(packsArray.value)

packToUpdate.scanned = true does show it as updated in the console, but the state itself doesn't get changed.
I assume I'll have to use SetIn, but I don't know how to write this.
image

Any help would be appreciated. Thanks

#2

That's correct, the setIn function is what you'll want to use.

It accepts arguments for the index, the property and the value eg

packsArray.setIn([1, 'scanned'], false);

This would set the "scanned" property of the object at index 1 (ie second record) in the array to false;

#3

Thanks, that seems to do the trick.

I've replaced the static index '1' from you example with the index that is being returned by the line below.

const packToUpdate = packsArray.value.findIndex(packItem => packItem.pack === pack)

packsArray.setIn([packToUpdate, 'scanned'], true)

For some reason, this is working perfectly fine for all the packs/objects, but not for pack no '1'.
The index returned is 0, so i don't understand why it doesn't work.

#4

that's strange, I can't replicate that issue locally. Maybe need to take a look at the code/data and see if we can figure out why it's not happy with index 0.
option_list.setIn([option_list.value.findIndex(i => i.value === 1), "label"], "a")

image
image923×721 32.6 KB

#5

Thanks for helping me out. Will try again if I'm able to get my app back. I''ve lost all my progress from yesterday.

#6

I've found the issue, it was in the evaluation of the condition:

if (packToUpdate && packsArray.value['0'].packinglist === packinglist) {

packTo Update returns 0 for the first element of the array.
The evaluation in the if condition checks for packToUpdate equals True. 0 evaluates as False, so it didn't meet the condition criteria.

Changing the conditon to this solved it:

if (packToUpdate >= 0 && packsArray.value['0'].packinglist === packinglist) {

Element not found will result in packToUpdate to be -1 instead of False.

#7

Hi @mbruijnpff!

setIn definitely sounds like a correct approach. Would something like this work? If not, please do let me know and I'd be happy to debug further with you :slight_smile:

var packToUpdate = packsArray.value.find(packItem => packItem.pack === pack)


 if (packToUpdate && packsArray.value['0'].packinglist === packinglist) {

   // packinglist and packno match and not scanned yet - update pack to true

   var updatedPackToUpdate = setIn(packToUpdate, ['scanned'], true)

   var updatedPacksArray = setIn(packsArray, ['value', packsArray.value.indexOf(packToUpdate)], updatedPackToUpdate)

   console.log(`Updated scanned value for pack ${pack}`)

 } else if (packToUpdate && packToUpdate.packinglist === packinglist && packToUpdate.scanned === true) {

   // match, but already scanned

   console.log('Already scanned!')

 } else if (packToUpdate && packToUpdate.packinglist != packinglist) {

   // pack match but packinglist doesn't match SHOW POPUP

   console.log('Wrong packinglist no!')

 } else {

   // no match packinglist and pack

   console.log(`Could not find pack with packlist ${packinglist} and pack ${pack}`)

 }

console.log(updatedPacksArray)