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 (getData
), and I want to add selected rows from this table to different temporary state variables (tempState1
, tempState2
, tempState3
, tempState4
) using buttons.
Here’s what I’m trying to achieve:
-
Display a table (
table1
) with data fromgetData
. -
Have four buttons, each responsible for adding selected rows to one of the four temporary state variables having 4 buttons is better that selector and is easier on the user.
-
Use inline JavaScript to concatenate the selected row’s data to the existing data in the respective state variable.
Steps I’ve Taken:
-
Created four temporary state variables (
tempState1
,tempState2
,tempState3
,tempState4
) initialized as empty arrays. -
Added a table (
table1
) that displays data from thegetCourses
query. -
Added four buttons to handle the addition of selected rows to each state variable.
Issue:
When I try to set the value of the temporary state variables using the button’s click handler, I get an error saying the method concat
is not a function.
Example Click Handler:
Here’s the configuration I’ve tried for one of the buttons:
-
Action: Set variable
-
State:
tempState1
-
Method: Set in
-
Key path: Leave it blank
-
Value:
<code>javascript</code><code>javascript </code>javascript
Copy code
{{ tempState1 ? tempState1.concat([{ $ref: `/courses/${table1.selectedRow.data.id}` }]) : [{ $ref: `/courses/${table1.selectedRow.data.id}` }] }}
Question:
How can I correctly set up the buttons to dynamically update the temporary state variables using inline JavaScript within the Retool interface? Any help or examples would be greatly appreciated!