How to dynamically update temporary state variables with buttons in Retool?

Goal: I'm building an app in Retool and need to dynamically update multiple temporary state variables based on button clicks. I have a table (table1) displaying data fetched from a query (getCourses), and I want to add selected rows from this table to different temporary state variables (tempState1, tempState2, tempState3, tempState4) using buttons. The expected behavior is for each button to add the selected row’s data to the respective state variable.

Steps:

  1. Created four temporary state variables (tempState1, tempState2, tempState3, tempState4) initialized as empty arrays.
  2. Added a table (table1) that displays data from the getCourses query.
  3. Added four buttons to handle the addition of selected rows to each state variable.
  4. Configured the click handlers for the buttons to concatenate the selected row's data to the existing data in the respective state variable.

Details: I'm encountering an issue where the concat method is not functioning as expected, possibly due to the initial state not being set correctly as an array. Below is an example configuration for one of the buttons:

  • Action: Set variable
  • State: tempState1
  • Method: Set in
  • Key path: Leave it blank
  • Value:
{{ tempState1 ? tempState1.concat([{ $ref: `/courses/${table1.selectedRow.data.id}` }]) : [{ $ref: `/courses/${table1.selectedRow.data.id}` }] }}

I beleive you need to put something in the key path field, for you i think it'd be ['value', tempState1.value.length - 1]. the last item in the path array is the key or array index you're updating.

the JS function signature for Set In is variableName.setIn(path:Array, new_value:any) so for the Value field you should just have the value you want to set tempState1.value['$ref'] to which is /courses/${table1.selectedRow.data.id}

so I think you just need to make one of the following changes:
option1

  • Action: Set variable
  • State: tempState1
  • Method: Set in
  • Key path: ['value', tempState1.value.length - 1]
  • Value: {$ref: /courses/${table1.selectedRow.data.id} }

i actually might have that wrong, you may need to try

  • Key path: ['value', tempState1.value.length - 1, '$ref']
  • Value: /courses/${table1.selectedRow.data.id}

option2

  • Action: Set variable
  • State: tempState1
  • Method: Set Value
  • Value: [{$ref: /courses/${table1.selectedRow.data.id} }, ...tempState1.value]

you could just use JS if you wanted to for whatever reason:

await tempState1.setIn(['value', tempState1.value.length - 1, '$ref'], `/courses/${table1.selectedRow.data.id`);

or

await tempState1.setValue([{$ref: `/courses/${table1.selectedRow.data.id}` }, ...tempState1.value]);