All right, let's take care of data, air and loading, these are all three different pieces of state
that we want to use to somehow customize the JSF.
So we returning from this component.
So this will be just some kind of basic Riak stuff.
All I want to do is print out air.
If there's an error, I want to print out loading.
If we're loading and if we do not have an error and if we are not loading, I want to instead map over
this data thing and print out all the different libraries that we just fetched.
So down underneath our form, I'm going to add in a check, I'm going to say if air is defined, then
go ahead and do an H three.
That prints out er inside of it, so if er is null, then we are not going to show in three.
We'll do something very similar for loading as well, if loading is true, then print out an H3.
That says loading DataDot.
And then finally, if there is no air and there is no loading.
And just go ahead and print out.
Our list of library names or package names, so I'll just put in here data, which will just take that
entire rate and just print it out, we might get a warning around that.
It's totally fine.
So let's save this and do a quick test.
Quick refresh.
I'm going to look for react when I click on Search, I should see very briefly the text loading up your
on the screen.
Yep, there it is.
And then I see my list of fetch packages printed up.
Likewise, if I open up my network request tab, I'm going to find this no throttling dropdown right
here, I'm going to change it to offline.
That's going to stimulate an air with our request.
So if I now change the text inside of here to anything else and then click on search, that's going
to result in an error with the request.
I'll then see our text updated right here to print out this error message we got back, which in this
case is simply network error.
I could change it back to no throttling.
Search again, we see the loading and then nothing appears because in this case we got no actual matches
for react, blah, blah, blah, but of course I can always search for react again and see those results
appear.
Well, that's pretty much it looks pretty good.
Last thing we might want to do very quickly is just print out our list of best libraries a little bit
better than we are right now.
So for that, we might just do a very quick mapping statement.
So I'll do a data map.
I'll take name.
And I'll just return a div.
With name and side of it, but on a key prop, make sure the list warning is not printed.
And that's pretty much it.
So now we see all the different libraries burnt out on a separate line.
Well, that is it, that is our example of Redox in typescript together, the big takeaways I want you
to understand.
Let's cover those the next video and just make sure that a couple of different aspects around this project
are super crystal clear.