All right, let's go ahead and add some state to our Star Wars random character generator using an API.
So first things first, we need to add a constructor, constructor.
We can pass in the props if we wanted to.
There's no prop, so we're just going to skip that.
We're going to say this DOD state is equal to and then it takes an object, or if you come from Python,
it takes a dictionary and we need to store what do we need to store the name, The Height, the Homeworld
and the films they're in.
So let's go ahead and store the name as null.
We don't know what that name is going to be yet.
The height is going to be null.
We don't know that height is going to be yet.
That homeworld is also going to be null.
We don't know what that is going to be yet and the films, that's going to be an empty array.
And the way I got this and we'll come back to this in just a second with a super but the way I got NUL
everywhere is because we don't know what the name height or Homeworld is, but films, we know that
that's going to be at least a list or an array.
And if we go back here, we're going to see.
See right here, this.
Is an array, and so we want to store that data.
Just as it is inside of our application.
Now, let's go ahead and run this, and this is saying that super needs to come before, so let's run
super cool.
That seems to work.
Good enough now, every time we click, get new character, we need to update this state.
And we do that with this set St..
And I'm literally just going to copy and paste this over.
And we're going to hard code some of these just for the time being, so the name is going to be Luke.
The height is going to be one hundred and seventy two, if I remember Tad to win, please don't judge
me if I spelt that wrong and I'm going to leave the films as one item in here, just item one, actually,
I'm going to put item two in here as well just so we can see what this looks like.
So we're just going to hardcourt these values and then we can change it in here.
So we can say this at state.
Name.
Height in centimeters, I think it's in centimeters, this state, Dr. Height.
The Homeworld is going to be a jewel, so this Dutch state.
Dot Homeworld.
And again, we're setting that state.
We originally said that state and when you click, we're going to reset that state or we're going to
update that state.
And lastly, Films is going to go in here.
This is going to be an interesting one.
We're going to work with this a little bit later.
But we could say this at State Dot films and we hardcoded this.
This is not using an API request yet.
You can see it kind of looks a little bit ugly, a little bit broken at the moment.
When we click it, it automatically fills those things in for us.
Check that out.
That's pretty nice.
Now, let's go ahead and make sure that this doesn't show up.
We're going to do that in the next lesson.
So every time you load the page, there's just a button.
And none of this stuff is going to show up until that button is clicked.
We'll do that next lesson.
But for the time being, make sure you have this hardcoded.
Don't worry about the API requests.
We just need to make sure you have a constructor, make sure you run super first.
But this DOT state, you're going to want to name height homeworld films or any other data you want
to use from Swaby from the swap API.
Make sure when you click you're going to be setting that state.
So you want to set the name, the height, the home world, the films or whatever properties you set
in your object in your state object.
And then simply print that out to the page in your render function.
Go ahead, try that out when you're ready.
Let's head on over to the next lesson where we hide all this stuff until it's actually available to
see.