States not updating with asigned variable


#1

I watched this video about basic States within React Studio. It seems imply that all I needed to do was set the Component State to the chosen variable to change the state. One challenge is that the interface has changed since this video was produced, so there isn’t a “Data” tab any longer. I’ve set up the field under “Active Component State” section to reflect the chosen variable, and it’s not translating over. Please advise. Thanks.


#2

Hi, the current Nested Comp tab is essentially the same as the Data tab was. What kind of values you tried to use in the “Active Component State” variable (i.e. data linkage)? It expects numerical value which can be in string format too. Numbering starts from 0 so the ‘State 1’ should be referred as 0, ‘State 2’ as 1 and so on.


#3

As Juha stated the functionality is exactly the same as it was when the Tab was called “Data”. I suggest you to check from developer tools that the state index value in Data slot / prop really changes.

Here’s an example project I just created:

And here’s the live preview: https://neonto.cloud/u/trafficlightdemo

Download link to project file: https://s3.amazonaws.com/sc.neonto.com/example_projects/states.rsproj.zip


#4

Thanks for the reply. The variable I’ve got is a digit, 0 to 4, but it’s saved on a data sheet that isn’t a data slot. Does it need to be a data slot to change states? The project is a game, where players can pick their character. A previous screen lets them pick one, which selects the character from a data sheet. I’m trying to change states of another screen so they see the things relevant to their characters, but not others.

I’m not a developer. How do I “check from developer tools that the state index value in Data slot / prop really changes?”


#5

Hi Antti,
why if i place in your example a text field linked ti the data slot variable ds_trafficLightState
in data runtime linkage text value property
the text field does not change the value?
this is important to make editing forms …
regards Paolo

(Text fileds value from dataslot not update itself)


#6

I think the problem is that if the same input field is set to save the state to Data slot and then update its content from same state then there would be infinite loop causing the whole app to crash. That’s probably the reason why input fields update only when you load the screen.


#7

can you make an example?
i have no data slot in input field save event!!


#8

Yes the state gets the value from props and if props change then the state changes as well. It does not mater where the data is fetched. You just need to make sure that the Data sheet is updated and also that the data is passed to props. Basically easiest way is to debug the code from browser’s Web developer tools (Google developer tools debug javascript). You can also add text label to screen and connect that to same “state variable” and see if the text in label changes.

P.S. You probably need to have some developer mindset or understanding about the React to make things with the Studio. The main idea is that it generates code and it’s almost necessary that one understands the basics of React development or it get’s really complicated. The Studio is not ‘no-code’ tool it’s more of an ‘low-code’ tool. Anyway you’ll learn a lot by checking the Studio generated code.


#9

I am very surprised by your answer! …
:open_mouth:
Please see the email that i have sent you!


#10

If one sets “When user edits text” -> Save to data slot (Same data slot which is used as value for the same textfield)

At the moment we cannot restrict the Studio UI to prevent this possible collision. @juha_neonto any thoughts about this?


#11

I understand possibles collisions but I do not agree with the restriction to update a input text fields with some dynamic data! also when the screen is loaded! this is an elementary thing!


#12

My understanding is that If input field would listen the state all the time then it would be uneditable. The value would always be overwritten to the value in state so user could not edit the field value and there’s no reason to use input field instead of text label etc. for showing the value in state.

I’m not an expert in React so let’s wait what Juha says on this.

P.S. I found this article related tho the matter: https://learnreact.design/tips/text-input-change-text-from-outside/


#13

this is exactly what i think


#14

Exactly @Antti_Neonto! The way react.js works makes this a bit more complex than it should be. Of course it can be implemented with some extra logic but with our current implementation the restriction is that text fields update from data linkages only when a screen is opened.


#15

Ok, but in this post

you wrote something different. or did I read wrong?
excuse me…


#16

Ah, you are correct! Data slot data linkage + same data slot in Save data… -interaction is a special case that supports fully dynamic updates. So if you can work with data slots then that’s the solution.


#17

but it does not wotks…see my email


#18

Ok, now I get it. In addition to data slot data linkage you should set the save data interaction using the same data slot
:

If you do those things it should work.


#19

Yes, this way it works.


#20

Thanks, all. First, how do I use the developer tools to confirm the values are moving through correctly? I think that might be a problem with another bug I’m addressing.

Second, could you confirm that any ordinal, value on the data sheet, starting with zero, can trigger changes in states? “Override state using data linkage” allows for values from Data Slots, from other sheets, and from Carried Properties. I’ve tried to assign values from other sheets and Carried Properties to this field, but I’m not getting fraction.

Thanks again.