Active Component State for List Components


In this video it shows how you are able to control the state of a component in a list using a variable (0 or 1).

I can’t seem to find this setting in the tool at this point. When I create a list that has a component with two states, I don’t see the how I can control this.

I am trying to have a button on my page that changes the columns and data in a list using two different states.

Any help would be greatly appreciated.



You need to add your component inside the list item component. Then you just set the component state for the embedded component based on list data.

Thanks for the response.

Are you saying I should update the component state via the script under “take item value from data sheet” when configuring the list?

Hi, what version of react studio do you use?

No I meant that you need to create component with couple states and place that component inside the component in the list. note that you need to set the props for embedded component so that the component gets the data from the data sheet.

Like this:

Download example project here:


this is perfect also to change a picture having only an index linking the picture to another datasheet!! rigth?
now i do this adding in the picture imagesource transformation script
var imgs = this.props.appActions.dataSheets[‘imgdispositivi’]; //the sheet with images
for (var i = 0; i < imgs.items.length; i++) {
if (imgs.items[i].id == value_tipo) { // value_tipo the index of the image
return imgs.items[i].immagine;

I guess that works. The downsize is that you need to go through the whole Data sheet on every item. If possible I’d suggest to put the image into same Data sheet what is used as list data source.

Thank you very much. I got it now.

I am using version 1.7.5