Now that we understand the prop system in React let's take a look at a another system that's a little
bit similar but designed for a very different purpose.
OK so once again we just took a look at the prop system.
This is all about how we communicate data from a parent component down to a child.
We're not going to take a look at another system called state the state system is all about tracking
a piece of data that's going to change over time inside of our application.
And anytime that piece of data changes we might want to somehow update the content on the screen of
our device these two systems.
I can almost guarantee you're going to get confused at some point in time.
So I got to tell you this once again and I'm going to repeat it several times throughout the course.
The prop system is all about communicating data from a parent to a child.
State is all about tracking a single piece of data.
And anytime it changes we will want to somehow update what is on the screen of our device.
OK.
Let's take a look at a couple of examples of state and get a better idea of how it works.
OK.
The first thing I want to do is take a look at a couple sample applications in each one these little
sample applications.
We're going to try to identify some piece of data that might need to change over time so the first application
we're going to look at is a simple counter app.
So maybe it's got some button right here that says increase.
Another one that says decrease in whenever a user taps on increase as you might guess we're going to
increase that count by 1.
Maybe goes all way up to 7.
And if they click on or tap on decrease it'll decrease by.
Maybe down to like negative 1 or negative 2 or whatever else so in this little application I want to
ask a couple of different questions.
Three questions in total.
My first question for you is what piece of data inside this application is changing once you identify
that piece of data.
I don't have a second question what type of data is it.
In other words is it a number a string an object in array.
What kind of data is it.
And then finally what does that piece of data is starting.
Value like when we first boot up our application.
What is the starting value of that piece of data.
Let's try to answer these three questions for this very simple app.
Well I think that the first question is pretty clear.
I think that that piece of data that's changing inside of application is like this counter variable
right here.
We've got some count we want to change it over time and every time we change that piece of data we probably
want to update the content on the screen of our application.
Next up what type of data is it.
Well it is a counter so I think it's safe to say that it's a plain no.
And finally what is the data starting value.
In other words when our application first boots up what does that Ken are going to say.
Well I think it's reasonable to say that the default starting value would be like simply zero.
Now this might seem like some weird three questions right here.
But let's repeat this process with two other applications really quickly then we're going to start to
write out our first example with state OK so here's the next one so in this application we might show
a label above a text input and maybe anytime user types in a name right here so like my name is Steve
Ansel enter and Steven.
Maybe a character by character.
I would then want to print out whatever text the user entered into that text input.
So as I type and Steven I would want to see your name is Steven appear right here.
Once again a very simple application but I want to try to answer these three questions about it once
again.
So what piece of data is changing.
What type of data is it.
And what is the default starting value.
In this case I think that the piece of data that's changing over time is some like name variable.
Maybe we somehow read out some text that the user is entering into its input right here and stored in
a variable called name or something similar what type of data is it.
Well it's definitely probably going to be a string.
You know it's a series of characters it's a name.
So I think that that piece of data that's changing over time is a string.
And then finally what's the default starting value.
Well when we first boot up our application I would expect to see like nothing inside of here.
Nothing inside the text input and nothing after your name is whatever.
So I think the default starting value would be an empty string that's supposed to be an empty string
right there it's really two separate quotes Okay let's repeat this process just one more time.
So on this one right here I've got a list of blog posts that I'm showing to a user.
Let's repeat the same process once again.
So what's the piece of data that's changing inside this application.
Well let's imagine for a second how we would really show a list a blog post to a user inside of an app.
Chances are our app does not have some like hardcoded list of blog posts.
Instead there's probably some API requests that we might need to make from our application to an outside
server to fetch a list of API requests so maybe we would have some piece of data called like blog posts
that would be changing over time inside of application by default on our application first starts up
that piece of data when maybe be an empty array because when our application first starts we have no
blog posts whatsoever.
At some point time we would then complete an API request to fetch our list of blog posts and then we
can update this piece of data right here something called like blog posts and I would maybe be an array
of objects where each object describes like the title and the content of a single blog post.
Ok so I know these three questions might seem a little bit weird.
It might seem weird to repeat the same process three times but now that we understand these kind of
three questions we want to ask about a single application.
Let's come back the next video we're going to start to put together our first example of working with
state inside of a component so click pause and I'll see you in just a minute.