1

00:00:00,880  -->  00:00:07,080
And the last section we started putting together our weather list container we put our table together

2

00:00:07,200  -->  00:00:11,250
and we hooked it up to our redux state along with the weather state right here.

3

00:00:11,250  -->  00:00:19,390
So we now have access to this stop Propst weather inside of weather list to build our list of Rosenau

4

00:00:19,400  -->  00:00:19,500
.

5

00:00:19,700  -->  00:00:22,610
Remember one row represents one city.

6

00:00:22,860  -->  00:00:27,610
We're going to need to build a list of rows and we're going to do that a little bit differently than

7

00:00:27,630  -->  00:00:31,730
how we build our list in the pass before we start that though.

8

00:00:31,860  -->  00:00:37,830
I want to make sure that it's really really clear exactly what the structure of our API data again is

9

00:00:37,830  -->  00:00:46,200
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

00:00:46,200  -->  00:00:51,600
response that I still have open here so we don't really care about the city right now.

11

00:00:51,690  -->  00:00:56,760
I really care about talking about is our list.

12

00:00:56,760  -->  00:01:06,780
So are this dot props dot whether value inside of our container that we just defined contains an array

13

00:01:06,870  -->  00:01:09,570
of objects just like this right here.

14

00:01:09,570  -->  00:01:21,210
Each one has a city property a cod whatever that is cod or a city has got to be a response status code

15

00:01:21,300  -->  00:01:22,120
whatever.

16

00:01:22,140  -->  00:01:28,280
It's got a city and it's got a list and then the list is an array of individual forecast snapshots.

17

00:01:29,040  -->  00:01:30,690
So just make sure it's real again.

18

00:01:30,700  -->  00:01:34,340
Just make sure it's really clear exactly how we're going be working with this data.

19

00:01:34,590  -->  00:01:37,030
Let's take a look at another Mocca.

20

00:01:38,040  -->  00:01:43,890
So here is a diagram of our Read state and increases zoom level and just a in a second just is one give

21

00:01:43,890  -->  00:01:45,090
you an overall.

22

00:01:45,240  -->  00:01:46,500
This is our read ex-state.

23

00:01:46,560  -->  00:01:50,730
It contains a single property weather which is an array.

24

00:01:51,000  -->  00:01:56,340
It's now going to zoom in.

25

00:01:56,340  -->  00:02:01,860
So we've got the single property whether that has an array and within that array is a bunch of objects

26

00:02:01,860  -->  00:02:02,420
.

27

00:02:02,490  -->  00:02:09,480
Each object has a city and the list to build the rows of our table.

28

00:02:09,750  -->  00:02:20,250
All we need to do is map over this property whether when we map over that array we'll get one city per

29

00:02:20,250  -->  00:02:20,990
row.

30

00:02:21,000  -->  00:02:22,060
All right.

31

00:02:22,560  -->  00:02:29,490
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

00:02:31,470  -->  00:02:33,020
inside of our table body.

33

00:02:33,090  -->  00:02:38,720
We're going to do our curly braces because we're going to make access to a javascript variable and we'll

34

00:02:38,760  -->  00:02:41,910
say this stop prop's weather.

35

00:02:41,940  -->  00:02:49,230
Remember this is now the array the array of objects will map over it and for each element in that array

36

00:02:49,800  -->  00:02:51,180
call the function.

37

00:02:51,180  -->  00:03:02,140
This dot render weather then we're going to define that function render weather.

38

00:03:04,500  -->  00:03:11,100
So since we're mapping over this array the stop Propst the weather the argument in here the first argument

39

00:03:11,220  -->  00:03:19,020
for every call is going to be a particular city of data or a particular you know object that contains

40

00:03:19,020  -->  00:03:20,690
a series data.

41

00:03:20,910  -->  00:03:23,530
So we'll call that argument city data.

42

00:03:24,180  -->  00:03:29,790
So this argument right here would be identical to saying like Basically this guy right here just this

43

00:03:29,790  -->  00:03:36,890
little bit one city and then a list of all of all the forecasts snapshots.

44

00:03:36,930  -->  00:03:46,320
So just to confirm that we're doing this correctly let's return from here a TR and inside of it we'll

45

00:03:46,320  -->  00:03:47,010
do it to the

46

00:03:49,980  -->  00:03:56,550
city data and we want to print the name out so to get access to the name of the city police city dot

47

00:03:56,700  -->  00:03:57,660
name.

48

00:03:58,710  -->  00:04:03,660
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

00:04:03,660  -->  00:04:04,890
to the API response.

50

00:04:04,890  -->  00:04:06,680
You can see that for a given city.

51

00:04:06,720  -->  00:04:09,090
You know here's the response here's what we're working with.

52

00:04:09,120  -->  00:04:16,210
We've got city dot name so that's where that's coming from city dot name.

53

00:04:17,610  -->  00:04:17,990
OK.

54

00:04:18,000  -->  00:04:19,010
So let's give this a shot.

55

00:04:19,080  -->  00:04:24,210
I'm going to save this file and then we will refresh the page

56

00:04:27,960  -->  00:04:31,680
and let's do a search for San Francisco.

57

00:04:33,120  -->  00:04:36,580
And of course we got San Francisco successfully popping up.

58

00:04:36,600  -->  00:04:39,930
Now let's add in Reno.

59

00:04:41,370  -->  00:04:47,670
Or how about Tampa and Phoenix go.

60

00:04:47,700  -->  00:04:49,140
This is exactly what we want.

61

00:04:49,440  -->  00:04:56,520
We've got one row in our table for each city and the first column is the name of the city.

62

00:04:56,580  -->  00:04:59,210
You'll notice that we do have an error here.

63

00:04:59,430  -->  00:05:03,720
Again it's an array about how we're rendering a list and whenever we have a list we need to provide

64

00:05:03,750  -->  00:05:05,220
a unique key property.

65

00:05:05,460  -->  00:05:08,590
Let's fix that really quick.

66

00:05:08,590  -->  00:05:14,820
So remember the rule behind adding a key in a re-act list we add it to the top level element in the

67

00:05:14,820  -->  00:05:15,420
list.

68

00:05:15,660  -->  00:05:21,570
And it just has to be some unique piece of data so we can make this also be the city name because that

69

00:05:21,630  -->  00:05:23,820
is a unique string.

70

00:05:23,970  -->  00:05:31,380
So we could do City Data dot city dot name or better yet just to make our code a little bit more dry

71

00:05:31,380  -->  00:05:31,550
.

72

00:05:31,620  -->  00:05:33,330
Don't repeat yourself.

73

00:05:33,450  -->  00:05:40,140
We can say Konst name City Data city name.

74

00:05:41,010  -->  00:05:46,810
And then for both the key and the TV we can just make a reference to name.

75

00:05:47,250  -->  00:05:51,240
Let's give it another shot.

76

00:05:51,240  -->  00:06:01,700
Dallas and Tampa Baltimore Boston good looking good.

77

00:06:01,710  -->  00:06:03,670
No more air over here anymore.

78

00:06:04,140  -->  00:06:06,690
Let's go ahead and continue in the next section