Let's first begin by adding in or finishing up some functionality inside of our component, so we need
to make sure that whenever a user clicks on our button, we take the current value of name and then
add it into some new maybe array piece of state.
So maybe we should have an array of strings that stores the entire list of guests or essentially all
the different names we have collected over time.
So I'm going to add in a new piece of state up here to get us started.
I'll call it guess.
Also get set.
Guess.
I'll do you straight and I'm going to initialize its value to be an empty array, because we're eventually
going to have an array of guests that we want to invite to our party.
Then inside of a button right here, I'll add on and on unclick.
We could definitely define an inline function right here to invoke, but just to make our lives a little
bit easier.
Let's instead define unclick up here.
Just to make it a little bit easier to write all the logic, we need to add in a new guest world and
make sure that I provide unclick right there.
OK, so now whenever a user clicks on that button, we want to take whatever text a user has written
into this input right here, and we want to add that as a new string into our guests array.
After that, we should then probably clear out the current value of the input as well, essentially
empty it entirely because that guest has been added in.
Let's take care of that step first.
So inside of unclick, I will call that name and then put an empty string that's going to cause that
input to empty out.
Next up, we'll take the current value of name and add it to our guests array by calling set guests.
So I will call set guests.
If we just tried to add in or just set gas to simply name like, so that will delete or essentially
remove any previous guests we have added into our app.
So rather than doing that, I'm going to add in square brackets, dot, dot, dot.
Yes.
And then name on top of that.
Now for getting the air for just a moment, just to make sure this line of code right here is really
clear.
This means we're going to take the current array of guests.
We're going to take all the different strings out of it, add it to a new array, and then add on name
to the very end.
Now, the code we have inside of here would normally be absolutely just fine JavaScript code.
Nothing wrong with what we have written so far.
But you could see in the typescript world, well, something is not quite going right.
So if we mouseover this air, we're going to very quickly see a little nasty error message.
And this is where we start to need to apply a little bit of knowledge around.
TypeScript.
So the error message itself says type array of string is not assignable to type array of never.
What's going on here?
All right.
Let's do a little bit deeper dive here and really figure out what's going on.
Whenever you define a new piece of state inside of a component using the you state hook, you provide
a default value for that piece of state.
In this case, we have provided a default value for state, for name of empty string and for guests,
we've provided an empty array.
TypeScript is going to try to use type inference to guess what the type of state is in the case of name
typescript is going to say, OK, you provided a string right here.
That means that the type of name is probably going to be a string in this case if we mouseover name.
You can see that is definitely the case.
So TypeScript has applied type inference right here.
Absolutely correctly.
However, in the case of guess right here, TypeScript has seen that there is an empty array and has
no idea what type of value should be stored inside that array.
So by default, when TypeScript tries to apply type inference to figure out what guess is, we mouseover
guess it says never right there.
And you can essentially interpret never right here as meaning.
TypeScript has no idea what kind of value is going to be present inside that array, or more precisely
in this case, because we put in an empty array without any type typescript assumes that that is going
to be an array that is forever empty.
So in either scenario, clearly not what we want, TypeScript, has not been able to figure out or guess
what the type of guess is going to be, do we need to give it a little bit of a hint?
We need to tell TypeScript what kind of value is going to be assigned to this piece of state to do so.
Here's the trick.
Right after you state, we're going to put in a set of those angle brackets and then side there we're
going to describe what type this piece of state is going to be.
So in our case, it's going to be an array of strings.
So put in string brackets like so.
As you guess, that's going to tell TypeScript that our best piece of state is going to be an array
of strings and at that point their messages go away, we can now mouseover guess and we're told guess
is going to eventually be an array of strings.
And that's pretty much it.
Now, if we save this.
And go test out our application.
I'll refresh.
And now I should be able to type in here.
Sarah or whoever else had guessed?
Oh, that's right, we have not actually added in the iteration to print out the list of guests right
there.
Still need to add that in.
But I think you can imagine, well, that part won't be so bad.
OK, so the takeaway here as that whenever we are making use of state inside of react, we can put in
a default value.
If TypeScript can figure out what that type of value is, everything is going to work out OK.
But if we put in any kind of default value right here where type inference doesn't work, then we need
to be a little bit more clear and provide an actual type for that piece of state by placing it inside
those angled brackets.
Well, let's take a quick pause, come back to next video and wrap up by rendering out our list of guests
down right above the input element.