And the last section we started putting together our weather list container we put our table together 2
and we hooked it up to our redux state along with the weather state right here. 3
So we now have access to this stop Propst weather inside of weather list to build our list of Rosenau 4
. 5
Remember one row represents one city. 6
We're going to need to build a list of rows and we're going to do that a little bit differently than 7
how we build our list in the pass before we start that though. 8
I want to make sure that it's really really clear exactly what the structure of our API data again is 9
again excuse me so I'm gonna pull my browser back open here and I'm going to go back over to the API 10
response that I still have open here so we don't really care about the city right now. 11
I really care about talking about is our list. 12
So are this dot props dot whether value inside of our container that we just defined contains an array 13
of objects just like this right here. 14
Each one has a city property a cod whatever that is cod or a city has got to be a response status code 15
whatever. 16
It's got a city and it's got a list and then the list is an array of individual forecast snapshots. 17
So just make sure it's real again. 18
Just make sure it's really clear exactly how we're going be working with this data. 19
Let's take a look at another Mocca. 20
So here is a diagram of our Read state and increases zoom level and just a in a second just is one give 21
you an overall. 22
This is our read ex-state. 23
It contains a single property weather which is an array. 24
It's now going to zoom in. 25
So we've got the single property whether that has an array and within that array is a bunch of objects 26
. 27
Each object has a city and the list to build the rows of our table. 28
All we need to do is map over this property whether when we map over that array we'll get one city per 29
row. 30
All right. 31
So let's go ahead and give this a shot and go back over to my code editor and we are going to define 32
inside of our table body. 33
We're going to do our curly braces because we're going to make access to a javascript variable and we'll 34
say this stop prop's weather. 35
Remember this is now the array the array of objects will map over it and for each element in that array 36
call the function. 37
This dot render weather then we're going to define that function render weather. 38
So since we're mapping over this array the stop Propst the weather the argument in here the first argument 39
for every call is going to be a particular city of data or a particular you know object that contains 40
a series data. 41
So we'll call that argument city data. 42
So this argument right here would be identical to saying like Basically this guy right here just this 43
little bit one city and then a list of all of all the forecasts snapshots. 44
So just to confirm that we're doing this correctly let's return from here a TR and inside of it we'll 45
do it to the 46
city data and we want to print the name out so to get access to the name of the city police city dot 47
name. 48
And just in case you know there's a little mystery on why I'm doing city that name here let's go back 49
to the API response. 50
You can see that for a given city. 51
You know here's the response here's what we're working with. 52
We've got city dot name so that's where that's coming from city dot name. 53
OK. 54
So let's give this a shot. 55
I'm going to save this file and then we will refresh the page 56
and let's do a search for San Francisco. 57
And of course we got San Francisco successfully popping up. 58
Now let's add in Reno. 59
Or how about Tampa and Phoenix go. 60
This is exactly what we want. 61
We've got one row in our table for each city and the first column is the name of the city. 62
You'll notice that we do have an error here. 63
Again it's an array about how we're rendering a list and whenever we have a list we need to provide 64
a unique key property. 65
Let's fix that really quick. 66
So remember the rule behind adding a key in a re-act list we add it to the top level element in the 67
list. 68
And it just has to be some unique piece of data so we can make this also be the city name because that 69
is a unique string. 70
So we could do City Data dot city dot name or better yet just to make our code a little bit more dry 71
. 72
Don't repeat yourself. 73
We can say Konst name City Data city name. 74
And then for both the key and the TV we can just make a reference to name. 75
Let's give it another shot. 76
Dallas and Tampa Baltimore Boston good looking good. 77
No more air over here anymore. 78
Let's go ahead and continue in the next section