TextField & Input Value

[00:00:00]
>> What if I instead of the other text, I add here a text field, so the user can type something, okay? It has two mandatory properties, value, and on value change. So what I want is to say hello, and the name of the user and the user will type his or her name.

[00:00:25]
So for that they can create the variable for the name, okay, this make sense. And by the way you have this example now we can start talking about the companion website. And here you have the slides everything that we are going to build and creating the project and basic concepts.

[00:00:49]
We have already seen this. Here you have one code to try. Okay, this is similar to what I'm going to write right now just to give you an idea that everything that I'm going to do from now on, it's available here in step by step. So What I need is to create that name, okay?

[00:01:09]
So I want to take the name on value change, it's a lambda expression. So I will open curly braces and I will say name= it, remember it. I can also do it in your line if you want no need to okay but then you have the it. So basically every time the text is changing the text field it's executing that on value change.

[00:01:35]
And I'm changing the variable the thing is that composable as I mentioned before are by default read only, so this is not gonna work, it's not gonna change. So, also here instead of get recompose I can use, $name makes sense. But this is not gonna work to make it work, the same happens on react.

[00:02:00]
The same happens in Angular components or imbue JS components. So I need to trigger a change within a state and we can do that but in this case we need to call mutablestateof. In this case we are setting that is going to be the state of these composable.

[00:02:26]
So that means that if the variable changes the state of the composable changes, and it's going to trigger a rerender, make sense? It gave me an error at this point, because it's first now there is a type issue because now we should be changing the value of the state.

[00:02:50]
The same here probably like so because now name is not a string it's immutable the state of a string there is another class in Kotlin that has a value inside. And also he says saying, hey, every time we are what is rerendering the function executing the function again.

[00:03:13]
So if we go into rerender the function, we are starting with an empty string again, which is a problem. Does it make sense? So if I create variables here any variable, and then I'm changing the variable during the state of the app. If for some reason first composure will need to be composed again, or rendered again, it's going to create the variables again.

[00:03:34]
So it's losing its state doesn't make sense. So that's why here it says if you read the error that we need to do using retrieve remember it says creating a state object during composition without using remember what is remember. Remember, it's just a call where we can ask the framework to remember that value.

[00:04:08]
Remember will actually act like it's similar to memo in other frameworks. It will remember that variable on the next execution is not going to create the variable again, if you remember the previous value. So I know it sounds weird. But now first, can we try this here? It's difficult to type.

[00:04:36]
Well, first then name it hello mutable state. Let me get rid of this ID exception. Because the name if the value is not a string anymore, it's an estate. And because now is an expression I need to use $ sign code block, because it's not so simple as a viable name, okay?

[00:05:02]
Build and refresh. It says hello nothing. The thing is that I cannot type here. Okay because it's a preview. I can turn on the preview has a way to turn on interactivity. It's called dragon start interactive mode. But is it for gestures is not for click for swipe for scroll is not gonna work for typing so, okay, so it's not letting me type in here.

[00:05:31]
So I need to run it on the real emulator to actually see if this works. So I have a text field, and I will say, I must start typing. This is my full name Maximiliano and you can see it's working. While I'm typing, it's actually changing live in the text, if you have experience with react or similar frameworks probably you are used to this pattern.

[00:05:57]
If you're new to this pattern, it will take some time to understand what's going on. So we don't change the text in the text composable we shaft change the state. The state will make a new composition of this function of this composable and that will trigger a new rendering.

[00:06:23]
You have any question?
>> No. Does it make sense? Kind of yes.
>> If you had multiple variables in there, they would each have their own remember?
>> That's a good question yeah, you can have one object with several values inside and one remember of like a beer object.

[00:06:44]
You can have several remembers and several states. You can remember states or you gonna remember just plain values and remember that value on the next composed process. So he's not going to create another variable. Another option is not going to reinitialize that variable the next time that function is being executed.

[00:07:08]
>> Can remember is ever collide with each other?
>> If the objects that you are remembering are not connected, no, you shouldn't happen. They're more advanced, they're more remembers they're more kind of remembers as well, okay? So it gets more complicated but for basic examples that works.