Let's start to get a better idea of how to work with states in typescript together to do so, we're
going to build out a very small little application.
So I want to build something that looks like this.
We're going to show some kind of imaginary party guest list.
This will list out a variety of different names of people who are invited to some imaginary party.
So we're going to eventually collect a list of names and then render them out as a list onto the screen
in order to add in more names to the list.
We'll put a text input down here towards the bottom and a little button after it.
So we're going to type in a name right there, click, add, and then expect to see the name added into
that list.
We're going to build this entire application inside of one single component.
OK, so to get started, I'm going to go back over to my editor, I'm going to make a new folder inside
my SC directory called State.
Now, the reason I'm calling the state is just because it is an example of using state normally instead
of a real Riak project, I would not build some folder called state or anything like that.
Then inside that folder, I'm going to make a new file called Guest List TSX.
All right, so we'll first begin by just writing out a very simple component.
I'm going to annotate its type as react dot f c, I'm not going to put in any angle brackets here because
we're not going to expect to receive any props to our guest list if we do not expect to receive any
props.
We do not have to add in those angle brackets right there or add in any kind of interface or anything
like that.
I'll then put in a very simple return.
The Divx and I'll just print out guest list and then a simple export default guest list at the bottom.
Once I've got that all put together, I'm going to try to show it inside of my index file, the back
inside of index cards.
I will import guest list.
From state guest list.
And then show that component in place that each one.
All right, let's go back over to our browser and just make sure everything is showing up.
Where's my browser?
Here it is.
All right, simple enough, let's go into that guest list component and start adding in a little bit
of indentation or some implementation.
So first, I probably don't really want to show just simply a guest list inside there.
So I'm going to expand that div.
I'm going to wrap guest list with an H three.
We'll eventually put in a little bit of logic right here to render out our list of guests, but right
now I'm going to first begin by adding an input.
And a button.
Right after it was the button, I'll give it the text add guest.
And that's pretty much it for static content that we need.
Let's now add in a piece of state to track first whatever user types into that input.
So we're going to set up that input as a controlled input.
Remember, a controlled input is one where we are going to designate an on change callback and a value
prop as well.
To do so, we first need to add in a piece of state to our application, something to track whatever
user types inside there.
So to add in a piece of state, we will import the U.S. state book from react.
Then right above our return statement, I'll add in a new piece of state called name.
Set name.
Call you state now I'm going to provide an initial value of empty string.
We can then start to wire up some props on the input element itself, we'll give it a value of name
and an unchanged change on change will provide a callback function that will receive an event object.
Whenever on change is called, we're going to update our set name piece of state, so we'll do a set
name IX, which is short for event, that target value like so.
Now, at this point in time, we have a fully functional component that makes use of some states, this
absolutely works everything we have inside of here.
And I just want you to note once again that outside of this little bit of type annotation right there,
there's nothing inside of our component that looks special just because we are making use of typescript.
So at the end of the day, you can really get pretty far with TypeScript and react put together without
really obsessing over any additional details.
We only need to start worrying about, TypeScript, if we want to add in a couple more checks to our
different components.
So let's take a look at how we might improve some of this code and also add in some more functionality
to it, like the ability to actually truly add a guest in the next video.