Using dynamic component names for .setValue

App Building
1

Does anyone know if there is a way do use dynamic names with components + .setValue in retool?

e.g. with components 'box' and 'box_other', is it possible to do something like this?

for (let i = 1; i <= 6; i++) {
box[i].setValue([i]);
box_other[i].setValue([i]);
}

Thanks in advance!

2

Hi @bg1900 Could you elaborate a bit on your question? Specifically it would be helpful to understand what kind of components box and box_other are and the context of those components in your app.

3

Hi Everett, The type of boxes could be text input, number input boxes. I'm not sure why the context matters? (though I probably don't understand what that means! :slight_smile: )

This is to use setvalues via a javascript query.

Hopefully this is the information you are after, let me know if it isn't

4

Hey @bg1900 Thanks for clarifying that for me! I was asking about the type of the component because some components support the .setValue method and others do not. For any components that support the setValue method, you can use it in a JS query!

text input, number input boxes

These both support .setValue! You can always check the reference for a component to see what methods are supported.

5

It is less the setvalue portion that is the issue and more using a dynamic name for the component. If that makes sense?

6

Hi @bg1900! if I'm understanding correctly, you would like to reference all components of the same type so you can iterate over them and change their content. For example, if we had 5 "Text Input" components, you would like to have a reference to all of them.

// A built-in reference to all textInputs like:
const textInputs = [textInput1, textInput2, textInput3, textInput4, textInput5]

// so you could do something like: 
for (let i = 1; i <= 5; i++) {
  textInputs[i].setValue("Hello World");
}

Is this what you are looking for?

7

yes, that is exactly what I was looking to do! thanks!

8

Awesome! Although there is no built-in reference, creating an array like in the code block I shared should do the trick. This will not work for List Views though. A workaround for this component is to follow a similar approach, but use State variables instead. Once we update those, the components within a List View that render using a reference to the state variables should update, and render the new values. Here is a reference for the workaround.

1 Like