Changing component's own state (e.g. expanding text use case)

We get asked this quite often so I think it’s time to open thread here as well.

So currently one can change other component’s state easily with Interaction but changing own state requires writing a small tiny script:

this.setState({visualStateIndexOverride: 1})

Notice that state index starts from 0. This means that first state is 0, second is 1 etc…

Here’s an example:

In the example project “Next state >” -button changes state to 1 and then to 2 and finally back to 0.

You can use this by creating a component which by default shows e.g. 100 characters and then expands the text when you click the text label. In default state use value transformer script to “cut” the text if length exceeds the 100 characters. You can add e.g. input + “Read more…” to the script. When user clicks the text label then just change the state to “1” which contains the full text.

P.S. We’re going to also add a premade interaction under the “Component…” into User Interactions. This means that you don’t necessary need to write a custom script for doing this.