In the last section we added a bunch of code to our blog and form all revolving around States and this
mystery property here that we called text.
So I pull up a diagram now and we're going to do a shot at trying to figure out what the heck is going
on here with this thing.
So here's our diagram.
So this diagram is meant to represent a cycle of sorts.
So we're going to start off the top left hand side.
We're going to go down there and come back up to the top 10.
So everything starts off with a text input.
We rendered it to art inside of our component.
It shows up on the screen it is just kind of there.
Once the rent is rendered and it's visible on the screen the text input just sits there and it doesn't
actually do anything until the user actually taps in it and then starts to enter some text.
So until the user enters some text the text input just sitting there.
Now when a user enters some text some really interesting stuff starts to happen.
Whenever the user enters text that onchange text event handlers called.
So he added a prop to that text and put on change text.
And we passed it a function that function gets called whenever a user typed something into that input.
OK and it gets called with a text that the user just added.
So it's not the weirdest thing in the world right.
We added a callback function this federal function right here is going to be called whenever the user
types inside that thing and it gets called with a text that the user outed.
So then after that onchange tests on change text event is called We merely call set state with the new
text.
So we take that text and it calls that state with it.
So now the current value of that text and put it like as far as the user is concerned as far as we're
concerned is this state DOT text.
That is what the value of the input is next because we called Set state the component immediately renders.
Don't forget that stuff whenever we call said state the component immediately renders.
And now here is where the magic happens when the text input re renders.
Right.
Like when our render method is executed again the text input is created again and when it renders we
tell it that its value should be equal to this dot state DOT text.
So we recreate the text input.
We placed it on the screen and we immediately tell it that it's values this dot statement text.
And so we start off all the way with the cycle again all the way back up to the top with the text input.
So the very critical part here the really important part is that whenever a user enters some text into
that input the text input is not responsible for knowing what its value is.
It has no idea what its value is.
Instead we save the value that the user entered to this state and then whenever the text input reminders
we say hey text input you're not going to tell us what your value is.
You have no idea what your value is.
We are going to tell you very distinctly your value like the the text you should contain should be coming
from this dot state DOT text.
OK.
So I know this might seem like a really crazy town way of handling text input.
I don't disagree with you.
To be honest it's very very much dissimilar from how just about every other javascript framework does
this right.
Every other javascript framework says let's put a text input on the screen.
When the user types something in.
Great just let them do it and then eventually when the user tries to submit the form let's reach into
the text input and pull the value out.
So re-activated is completely different in that regard.
We are not letting the text exist inside the text input the text exists as a piece of state.
On our component that's how it works.
The benefit to this is that we always know exactly what the value of that text input is.
We can just reference this dot state DOT text.
Now maybe that doesn't sound like the greatest benefit in the world but believe me as soon as we start
to try to pull the text of this thing and try and make this into reusable component blah blah blah blah
blah.
All these benefits are going to come together and you're going to realize that holding states or holding
text outside of the text input actually has a fair number of benefits.
OK.
So this has been kind of a heavy little discussion talking about how these text inputs work.
So let's take a quick break and then come back and turn this text input right here into a reusable component.