Add values to temporary state array

[emilio]

Hi team! I'm working on an app that accepts a CSV list of domains through the Upload (FilePicker) component and manually triggers an API query through a Button component click.

The API response returns an array of objects that includes email addresses I'm trying to save to a temporary state variable for later use. I read this article and this previous forum post, but still can't manage to add emails to the temporary state array. It keeps overwriting the array with single emails and what's left after running through all domains from the CSV is the last email.

I'm attaching a screenshot for troubleshooting purposes. The temporary state is called prospectEmails and starts off as an empty array. The script logic:

• Loops through the CSV
• Logs the prospect's email
• Logs the temporary state value before trying to add something to it
• Then uses setValue() to add the prospect's email. (Note: I've tried using concat with and without wrapping the email in an array, pushing the email, spreading the original array and adding the email, etc.)
• Logs the temporary state value after trying to add something to it

The console successfully logs the email, but doesn't show any values being stored in the final array even though inspecting the temporary state from the panel shows the last email in there.

Any thoughts on how I can accomplish this?

Thank you!

[bradlymathews]

You want to use setIn() rather than setValue().

See this post: Using setIn() to change a temp state variable - #3 by MarkR

The first key to setIn() (pun intended) is to make sure you are using your key value correctly. It is the first parameter of setIn(). If it does not exists, it will be appended. If it does exist, it will overwrite the existing key (aka element) which leads to the second important thing: The entire element will get overwritten with the new value. That means if you want to just set a single property, you must recreate the entire object with the changed property and set that.

For example if you have this object at key 1: {myValue: 72, myOtherValue: 'Fred'} and you do setIn([1], {myValue: 23}), the object will now be missing myOtherValue.

I was just doing that today and here is some sample code that loops through all elements in my temp state array, makes some changes and reloads them into the temp state array:

for (let i = 0; i < Timers.value.length; i++) {
  let item = Timers.value[i]
  if (item.paused) {continue}
  item.countDownSeconds = item.countDownSeconds - 1
  if (item.countDownSeconds <= 0 && !sndAlarm[i].playing) {
    console.log("Alarm On")
    sndAlarm[i].play()
  }
  let s = new Date(item.countDownSeconds * 1000).toISOString().substr(11, 8)
  Timers.setIn([i], item )
}

Here's a simpler version to set a single value:

let item = Timers.value[i]
item.paused = true
Timers.setIn([i], item )

The other option is to make an array with all of the values ands then use setValue(myNewArray) at the end.

[emilio]

Hey Bradly! Thank you for your help. That other post you provided was really helpful to understand how setIn() actually works and your examples were golden! I ended up going with your last suggestion, pushing all emails to an array and then using setValue() to push them to my temporary state.