1 00:00:00,000 --> 00:00:03,430 [MUSIC PLAYING] 2 00:00:03,430 --> 00:00:17,640 3 00:00:17,640 --> 00:00:19,740 SPEAKER 1: Hello, and welcome for lecture four. 4 00:00:19,740 --> 00:00:22,490 This week, we'll be covering lists and user input. 5 00:00:22,490 --> 00:00:24,990 And so in the previous lecture, we looked into React Native. 6 00:00:24,990 --> 00:00:27,939 So we started diving into the components that they give us. 7 00:00:27,939 --> 00:00:29,730 We looked at how to style these components. 8 00:00:29,730 --> 00:00:34,440 We looked at how to handle some events, and how that differs from reactive web. 9 00:00:34,440 --> 00:00:37,000 We talked about a couple of different types of components. 10 00:00:37,000 --> 00:00:40,140 One, being stateless functional components and the other being React 11 00:00:40,140 --> 00:00:42,330 components with their life cycles. 12 00:00:42,330 --> 00:00:45,480 We looked at Expo, which is a library of-- 13 00:00:45,480 --> 00:00:47,820 a bunch of tools around React Native that 14 00:00:47,820 --> 00:00:50,620 allow you to develop much more quickly. 15 00:00:50,620 --> 00:00:55,140 We looked at how to import and export things from packages and modules. 16 00:00:55,140 --> 00:00:58,517 And then lastly, we looked at prop types, which are library given to you 17 00:00:58,517 --> 00:01:01,100 by React that allows you to keep track of the different props, 18 00:01:01,100 --> 00:01:04,209 now that you're passing two different components. 19 00:01:04,209 --> 00:01:07,200 So this week we're going to talk about React Native 20 00:01:07,200 --> 00:01:10,150 much more deeply, and in the context of contacts. 21 00:01:10,150 --> 00:01:12,750 And so we're going to write a simple application, whereby 22 00:01:12,750 --> 00:01:17,730 we can add contacts to a list and display those for the user. 23 00:01:17,730 --> 00:01:21,970 And so what might we want to implement in doing that? 24 00:01:21,970 --> 00:01:24,620 Obviously, we'll need some sort of way to add 25 00:01:24,620 --> 00:01:27,240 users, which we'll do towards the end of lecture, 26 00:01:27,240 --> 00:01:30,150 but also we have to have some sort of way to display those users. 27 00:01:30,150 --> 00:01:32,130 So if you can imagine on your phone, if you 28 00:01:32,130 --> 00:01:35,519 want to keep track of your contacts, you want to be able to see all of them 29 00:01:35,519 --> 00:01:36,810 and scroll through all of that. 30 00:01:36,810 --> 00:01:40,604 31 00:01:40,604 --> 00:01:43,020 In order to do that, we need to use what are called lists. 32 00:01:43,020 --> 00:01:48,220 And so in web, browsers will automatically become scrollable. 33 00:01:48,220 --> 00:01:51,480 If the content is greater than the window height then 34 00:01:51,480 --> 00:01:53,910 the browser will take care of the scrolling for you. 35 00:01:53,910 --> 00:01:57,110 Unfortunately, this is not true in React Native. 36 00:01:57,110 --> 00:02:00,281 For mobile, we actually have to do that manually. 37 00:02:00,281 --> 00:02:03,030 So there are a few different components that allow you to do that. 38 00:02:03,030 --> 00:02:05,510 The most simple of which, is called a ScrollView. 39 00:02:05,510 --> 00:02:09,389 And so it's just like a normal view, except you have the ability to scroll. 40 00:02:09,389 --> 00:02:11,520 We have something that was called ThisView. 41 00:02:11,520 --> 00:02:14,310 If you see that in some source code or maybe some libraries 42 00:02:14,310 --> 00:02:17,060 that you're looking into, that used to exist. 43 00:02:17,060 --> 00:02:22,650 It still exists, though it is deprecated and is not actively used anymore. 44 00:02:22,650 --> 00:02:24,990 To replace those, there are a couple things 45 00:02:24,990 --> 00:02:30,370 called FlatList and SectionList, which we'll be looking into in a little bit. 46 00:02:30,370 --> 00:02:33,610 So firstly, we have this thing called a ScrollView. 47 00:02:33,610 --> 00:02:35,990 So this is the most basic scrolling view. 48 00:02:35,990 --> 00:02:40,210 And so it will actually render all of its children before appearing. 49 00:02:40,210 --> 00:02:43,290 And so, if you can imagine, say you have a view that 50 00:02:43,290 --> 00:02:44,940 has a bunch of children in it. 51 00:02:44,940 --> 00:02:46,980 If it overflows the page, unfortunately you 52 00:02:46,980 --> 00:02:51,150 can't see the content that's beyond the window because unlike in web, 53 00:02:51,150 --> 00:02:53,710 mobile apps don't allow you to scroll down. 54 00:02:53,710 --> 00:02:55,860 But with the scroll view, it will actually do that. 55 00:02:55,860 --> 00:02:57,120 It will render all of it's children and then 56 00:02:57,120 --> 00:02:59,090 allow you to scroll back and forth. 57 00:02:59,090 --> 00:03:01,440 And so let's dive into how that is actually used. 58 00:03:01,440 --> 00:03:04,140 59 00:03:04,140 --> 00:03:07,260 And so if you saw on Slack, I posted a link to the source code, 60 00:03:07,260 --> 00:03:08,820 it's also linked on the web site. 61 00:03:08,820 --> 00:03:11,570 And today, we're going to be working through a simple application, 62 00:03:11,570 --> 00:03:14,250 and there is a bit of code that is posted 63 00:03:14,250 --> 00:03:19,290 right now that will allow you to follow along in class, if you so wish. 64 00:03:19,290 --> 00:03:22,890 So first thing that we're going to do is look into how we actually 65 00:03:22,890 --> 00:03:26,620 create contacts for the first time. 66 00:03:26,620 --> 00:03:29,640 So if you look into this file called, contacts.js, you 67 00:03:29,640 --> 00:03:31,680 have a bunch of things in there. 68 00:03:31,680 --> 00:03:34,877 At the very top, we declare this constant, called number of contacts. 69 00:03:34,877 --> 00:03:37,210 And as you'll see in a second, I wrote this little thing 70 00:03:37,210 --> 00:03:39,980 that will allow you to just generate a bunch of random contacts. 71 00:03:39,980 --> 00:03:42,720 And so it pulls from a list of long first names. 72 00:03:42,720 --> 00:03:45,330 And so on line three, here we see that there 73 00:03:45,330 --> 00:03:48,300 are a bunch of hard coded first names. 74 00:03:48,300 --> 00:03:52,980 If you scroll a little bit farther down, you see a long list of last names. 75 00:03:52,980 --> 00:03:55,610 So the functions that we'll look at in the second 76 00:03:55,610 --> 00:03:57,810 will actually pull from that array of first names, 77 00:03:57,810 --> 00:04:01,440 and that array of second names of last names. 78 00:04:01,440 --> 00:04:03,600 And so some sort of function that we might 79 00:04:03,600 --> 00:04:06,060 want to have when we're generating random names 80 00:04:06,060 --> 00:04:08,751 is some sort of function that generates random numbers. 81 00:04:08,751 --> 00:04:10,500 And so you see here, we have some function 82 00:04:10,500 --> 00:04:13,710 called rand, which will generate a random number between some minimum 83 00:04:13,710 --> 00:04:16,209 and some [INAUDIBLE]. 84 00:04:16,209 --> 00:04:18,630 So you can look into the math that's done here, 85 00:04:18,630 --> 00:04:20,760 but basically, it's just a little bit of math that 86 00:04:20,760 --> 00:04:25,460 generates a random number from 0 to 1. 87 00:04:25,460 --> 00:04:29,622 Multiplies that by some scaling, and then scales it up to the minimum. 88 00:04:29,622 --> 00:04:31,830 Basically, it does a little bit of math and gives you 89 00:04:31,830 --> 00:04:35,310 a number between a minimum and maximum. 90 00:04:35,310 --> 00:04:37,870 Next, we have a function that will actually generate a name. 91 00:04:37,870 --> 00:04:41,880 And so we have this thing called generate name, which when invoked, 92 00:04:41,880 --> 00:04:45,300 you see this, what's called a template literal, which 93 00:04:45,300 --> 00:04:49,450 allows us to do some JavaScript, evaluate an expression, 94 00:04:49,450 --> 00:04:51,450 and actually add that to a string without having 95 00:04:51,450 --> 00:04:54,560 to do some string concatenation. 96 00:04:54,560 --> 00:04:58,470 And so with backticks and this thing, a dollar sign, and brackets, 97 00:04:58,470 --> 00:05:01,720 we can actually throw in line a JavaScript expression, 98 00:05:01,720 --> 00:05:05,810 which will get evaluated and automatically add this to a string. 99 00:05:05,810 --> 00:05:09,330 And so we see here we're invoking this random function 100 00:05:09,330 --> 00:05:11,580 with the number of first names that we have minus one, 101 00:05:11,580 --> 00:05:14,340 which will give us a random first name. 102 00:05:14,340 --> 00:05:18,020 We do a similar thing with the last name and then use this template literal 103 00:05:18,020 --> 00:05:19,420 to give us a random name. 104 00:05:19,420 --> 00:05:22,100 So first name, space, last name. 105 00:05:22,100 --> 00:05:27,740 We see a similar function down here, that will allow 106 00:05:27,740 --> 00:05:30,890 us to generate a random phone number. 107 00:05:30,890 --> 00:05:35,300 So we see that random function again, giving us a number between 100 and 999. 108 00:05:35,300 --> 00:05:37,880 So basically, some random three digit number. 109 00:05:37,880 --> 00:05:41,030 Again, another random three digit number, and the random four digit 110 00:05:41,030 --> 00:05:48,080 number with dashes in the middle, which will give us the 10-digit phone number. 111 00:05:48,080 --> 00:05:50,880 We have a function down here, which will create a contact. 112 00:05:50,880 --> 00:05:55,010 And so the way that we're defining your contact is by giving it a name. 113 00:05:55,010 --> 00:05:58,850 The way that we get a name is by calling that generate name function and a phone 114 00:05:58,850 --> 00:05:59,490 number. 115 00:05:59,490 --> 00:06:01,406 And the way that we get a phone number is just 116 00:06:01,406 --> 00:06:05,002 by invoking that generate phone number function. 117 00:06:05,002 --> 00:06:07,460 And so when we invoke this function called, create contact, 118 00:06:07,460 --> 00:06:10,910 we're given an object with a name and a phone number, 119 00:06:10,910 --> 00:06:14,339 and that's what we're going to consider a contact for our examples. 120 00:06:14,339 --> 00:06:16,130 I also wrote a little helper function there 121 00:06:16,130 --> 00:06:20,030 that we'll use in a little bit, which allows us to alphabetize lists. 122 00:06:20,030 --> 00:06:22,560 And so it's just a way of comparing a couple of names. 123 00:06:22,560 --> 00:06:24,980 So if we pass a couple of contacts, we just 124 00:06:24,980 --> 00:06:28,700 extract the name here, extract the name of the second contact, 125 00:06:28,700 --> 00:06:30,380 and just compare them. 126 00:06:30,380 --> 00:06:32,660 So see which one comes first in the alphabet, which 127 00:06:32,660 --> 00:06:35,360 will allow us to do some alphabetizing. 128 00:06:35,360 --> 00:06:39,710 And lastly, we have this function, which allows us to add keys. 129 00:06:39,710 --> 00:06:43,040 And basically, what we're doing is we're passing a value in a key. 130 00:06:43,040 --> 00:06:45,110 We're inserting the key. 131 00:06:45,110 --> 00:06:47,070 And so we see a couple of new things here. 132 00:06:47,070 --> 00:06:48,440 One is the shorthand. 133 00:06:48,440 --> 00:06:54,560 And so if we have something like that, that's actually shorthand for something 134 00:06:54,560 --> 00:06:58,170 you may do a lot, which is this. 135 00:06:58,170 --> 00:07:02,090 So the people who maintain JavaScript, who have made an [INAUDIBLE] actually, 136 00:07:02,090 --> 00:07:05,090 notice that this is something that you see very often in code. 137 00:07:05,090 --> 00:07:08,660 And so rather than repeating a key and its value where 138 00:07:08,660 --> 00:07:13,070 the key is the name of a variable, you can actually 139 00:07:13,070 --> 00:07:15,860 do that in line and just by removing the second half, 140 00:07:15,860 --> 00:07:18,750 it automatically fills that in for you. 141 00:07:18,750 --> 00:07:21,680 We also see this dot, dot, dot, val. 142 00:07:21,680 --> 00:07:25,640 So we talked about a little bit in previous lectures 143 00:07:25,640 --> 00:07:27,420 doing what's called array destructuring. 144 00:07:27,420 --> 00:07:30,010 And so by doing dot, dot, dot, in array name, 145 00:07:30,010 --> 00:07:32,660 it will actually explode that array into a new array, 146 00:07:32,660 --> 00:07:37,360 which is helpful for when you want to concatenate two new array's immutably. 147 00:07:37,360 --> 00:07:40,790 It just happens to be that this thing also exists for objects, 148 00:07:40,790 --> 00:07:44,090 and so one way we could implement this function 149 00:07:44,090 --> 00:07:49,360 would be by hard coding all of those key value pairs. 150 00:07:49,360 --> 00:07:56,920 So if we want to do const addKeyToContact, 151 00:07:56,920 --> 00:08:03,000 if it were a function that takes a contact and a key, 152 00:08:03,000 --> 00:08:04,720 we could actually do the exact same thing 153 00:08:04,720 --> 00:08:08,930 by first doing key gets whatever the key was passed. 154 00:08:08,930 --> 00:08:14,380 We could also-- we know exactly all of the key value pairs in a contact, 155 00:08:14,380 --> 00:08:15,550 right? 156 00:08:15,550 --> 00:08:19,150 We have name gets generate name and phone gets generate phone. 157 00:08:19,150 --> 00:08:22,514 So we know that every single contact is going to have a name and a phone. 158 00:08:22,514 --> 00:08:24,430 And so we can actually just hard code that in. 159 00:08:24,430 --> 00:08:32,000 We can say the name gets the contacts name, and we can do the phone 160 00:08:32,000 --> 00:08:39,169 gets contact phone, which is fine. 161 00:08:39,169 --> 00:08:42,789 It does exactly the same thing as this bottom function does, 162 00:08:42,789 --> 00:08:44,920 assuming that contact is in the shape. 163 00:08:44,920 --> 00:08:48,820 The downside is, what happens if we start to add new keys to contacts? 164 00:08:48,820 --> 00:08:51,350 Say we added a first name, last name rather than name, 165 00:08:51,350 --> 00:08:54,190 or say we added an address, or a bunch of other fields, 166 00:08:54,190 --> 00:08:58,480 we'd also need to remember to go add all of those key value pairs 167 00:08:58,480 --> 00:09:00,620 into this add key to contact. 168 00:09:00,620 --> 00:09:03,167 And so the maintainers of ECMAScript realized hey, 169 00:09:03,167 --> 00:09:06,250 this is something that we're going to be doing very often, so why not have 170 00:09:06,250 --> 00:09:08,710 some sort of shorthand to do that? 171 00:09:08,710 --> 00:09:12,550 And so what they gave us was this. 172 00:09:12,550 --> 00:09:16,170 It's called object destructuring, where you do dot, dot, dot contact 173 00:09:16,170 --> 00:09:19,210 and that will actually take all of the key value pairs of contact 174 00:09:19,210 --> 00:09:22,916 and automatically do what I had there before for you. 175 00:09:22,916 --> 00:09:24,790 So this is a pattern that you see very often. 176 00:09:24,790 --> 00:09:29,050 So say you wanted to clone state or say you wanted to clone a bunch of props. 177 00:09:29,050 --> 00:09:32,770 Those are also in the shape of objects and so this dot, dot, dot notation 178 00:09:32,770 --> 00:09:35,440 allows you to do that easily. 179 00:09:35,440 --> 00:09:39,042 And so we use that here and add keys so that when 180 00:09:39,042 --> 00:09:42,250 we're past the value of an object, we can actually just clone the object very 181 00:09:42,250 --> 00:09:44,900 quickly and append the key. 182 00:09:44,900 --> 00:09:48,160 In the very final line, we see what we are exporting 183 00:09:48,160 --> 00:09:51,460 as the default export for this module. 184 00:09:51,460 --> 00:09:55,720 We see, create an array of length, number contacts. 185 00:09:55,720 --> 00:09:59,020 And so at the very top, rather than hard coding in some value here, 186 00:09:59,020 --> 00:10:02,571 we just said, hey, give us some sort of number where 187 00:10:02,571 --> 00:10:04,570 we want that number to be the number of contacts 188 00:10:04,570 --> 00:10:09,070 that we eventually export, and then we go ahead and use that there. 189 00:10:09,070 --> 00:10:12,080 And then we go ahead and map add keys to it. 190 00:10:12,080 --> 00:10:15,250 And so array dot from is a function in JavaScript 191 00:10:15,250 --> 00:10:18,490 where it allows you to take something of array like shape 192 00:10:18,490 --> 00:10:19,780 and turn into an array. 193 00:10:19,780 --> 00:10:23,330 It takes another argument, which you map over these things. 194 00:10:23,330 --> 00:10:25,900 And so by passing in length NUM_CONTACTS, 195 00:10:25,900 --> 00:10:28,510 that's the shape of an array object. 196 00:10:28,510 --> 00:10:31,900 Because every single array has a dot length value, 197 00:10:31,900 --> 00:10:34,640 and so by passing in this object called length NUM_CONTACTS, 198 00:10:34,640 --> 00:10:38,140 it's a shorthand way of just creating an array of arbitrary length. 199 00:10:38,140 --> 00:10:40,630 We then map over it create contacts. 200 00:10:40,630 --> 00:10:42,010 And what does create contact do? 201 00:10:42,010 --> 00:10:44,350 Well, it doesn't care what objects are passed to it, 202 00:10:44,350 --> 00:10:46,510 and so in this case when we use map, we really 203 00:10:46,510 --> 00:10:50,020 don't care about what the value of the array values 204 00:10:50,020 --> 00:10:51,850 are to begin with because we're just going 205 00:10:51,850 --> 00:10:55,850 to replace those with random contacts. 206 00:10:55,850 --> 00:10:58,420 And so by doing array dot from length of number of contacts, 207 00:10:58,420 --> 00:11:01,150 that creates an empty array of length and number 208 00:11:01,150 --> 00:11:04,190 of contacts, which we declared at the very top. 209 00:11:04,190 --> 00:11:06,250 We then map create contact over it, so now we 210 00:11:06,250 --> 00:11:10,810 have an array of length and NUM_CONTACTS filled with random contacts. 211 00:11:10,810 --> 00:11:12,820 And then go ahead and map over that to add keys, 212 00:11:12,820 --> 00:11:17,240 and we'll see why this is valuable in a second. 213 00:11:17,240 --> 00:11:22,180 So any questions on this little helper file that I put together? 214 00:11:22,180 --> 00:11:26,080 Basically, all it does is create a length-- 215 00:11:26,080 --> 00:11:31,930 an array of length NUM_CONTACTS. 216 00:11:31,930 --> 00:11:35,020 So 1,000 here and then it goes ahead and fills that 217 00:11:35,020 --> 00:11:40,150 with a bunch of contacts where we define a contact as a name and a phone number. 218 00:11:40,150 --> 00:11:42,770 219 00:11:42,770 --> 00:11:47,080 So let's go ahead and first try to add that to some sort of application 220 00:11:47,080 --> 00:11:50,640 where we can display all of these contacts. 221 00:11:50,640 --> 00:11:56,200 And so if you go ahead and run the project that I've linked to, 222 00:11:56,200 --> 00:12:02,350 all it is, is a blank screen that allows you to toggle the contacts being shown. 223 00:12:02,350 --> 00:12:04,375 And so now, that's actually-- 224 00:12:04,375 --> 00:12:10,320 225 00:12:10,320 --> 00:12:13,710 look at what the application is doing. 226 00:12:13,710 --> 00:12:19,470 And so if you open up this application we see the usual imports at the top. 227 00:12:19,470 --> 00:12:21,110 So we're importing React from React. 228 00:12:21,110 --> 00:12:24,710 We're importing a bunch of views from React Native. 229 00:12:24,710 --> 00:12:28,790 One of those is ScrollView, which we'll be looking at in a second. 230 00:12:28,790 --> 00:12:32,240 We see important concepts from Expo, which as we saw in a previous lecture, 231 00:12:32,240 --> 00:12:35,870 allows us to have some padding for the status bar at the top. 232 00:12:35,870 --> 00:12:38,090 We're importing contacts from contacts, which is 233 00:12:38,090 --> 00:12:39,990 the file that we were just looking at. 234 00:12:39,990 --> 00:12:42,470 And then we're just declaring a new class called, app. 235 00:12:42,470 --> 00:12:44,386 And so the first thing that you see that looks 236 00:12:44,386 --> 00:12:47,370 different than what we've seen before is this thing called, state. 237 00:12:47,370 --> 00:12:50,300 We've talked about state extensively, but in prior lectures 238 00:12:50,300 --> 00:12:53,035 when we look at state, we always do that in the constructor. 239 00:12:53,035 --> 00:12:55,160 There's actually another shorthand that we see here 240 00:12:55,160 --> 00:12:59,750 that is very useful for when you want to use constructors that all they do 241 00:12:59,750 --> 00:13:01,400 is add state. 242 00:13:01,400 --> 00:13:04,790 And so as we saw in previous lectures, when we were doing something 243 00:13:04,790 --> 00:13:10,220 like binding an anonymous function like this to some sort of class property, 244 00:13:10,220 --> 00:13:12,260 we can actually also do that with state. 245 00:13:12,260 --> 00:13:17,030 And so this is a shorthand, which actually will compile down to this. 246 00:13:17,030 --> 00:13:29,280 247 00:13:29,280 --> 00:13:33,550 And so as we saw earlier, all I had was state equals this. 248 00:13:33,550 --> 00:13:37,710 And what happens when you compile this, is it actually compiles into this. 249 00:13:37,710 --> 00:13:41,190 It takes all of the class properties that we declared and moves that 250 00:13:41,190 --> 00:13:42,540 into the constructor. 251 00:13:42,540 --> 00:13:45,510 And so you see that we have this toggle contacts, that 252 00:13:45,510 --> 00:13:50,600 actually gets moved up into the constructor during translation. 253 00:13:50,600 --> 00:13:55,800 And so we see this dot contacts, this dot toggle contacts, 254 00:13:55,800 --> 00:14:06,040 equals some anonymous function, like this. 255 00:14:06,040 --> 00:14:10,620 And so when this actually gets compiled, it all actually turns into this. 256 00:14:10,620 --> 00:14:13,740 But since we're not actually doing anything in the constructor other 257 00:14:13,740 --> 00:14:17,830 than calling the super, then why not just use the class properties 258 00:14:17,830 --> 00:14:19,230 so that it is easier to read? 259 00:14:19,230 --> 00:14:22,260 And so if you are looking at other people's code 260 00:14:22,260 --> 00:14:25,710 or maybe reading libraries, most people actually 261 00:14:25,710 --> 00:14:30,350 do something like this, just because it's slightly easier to read. 262 00:14:30,350 --> 00:14:36,190 263 00:14:36,190 --> 00:14:39,250 And so we see toggle contacts is a function 264 00:14:39,250 --> 00:14:42,910 that we defined, and all it does is it toggles the show contacts 265 00:14:42,910 --> 00:14:45,260 Boolean, which we store in the state. 266 00:14:45,260 --> 00:14:46,930 And finally, we see render. 267 00:14:46,930 --> 00:14:50,320 As we talked about extensively last lecture, components, 268 00:14:50,320 --> 00:14:53,780 their sole purpose is to render things to the UI. 269 00:14:53,780 --> 00:14:56,710 And so the render function here is just returning a view 270 00:14:56,710 --> 00:14:59,920 with a button that toggles the contacts. 271 00:14:59,920 --> 00:15:03,369 And right now, we're not actually doing anything with that value, 272 00:15:03,369 --> 00:15:05,410 but we're actually going to turn this into an app 273 00:15:05,410 --> 00:15:10,280 where we can actually show the contacts on the screen here. 274 00:15:10,280 --> 00:15:13,360 And so let's try to do this in a way that we-- 275 00:15:13,360 --> 00:15:16,210 using things that we have learned in prior lectures. 276 00:15:16,210 --> 00:15:20,650 And so if we wanted to display all of these contacts on the screen, 277 00:15:20,650 --> 00:15:22,622 how might we go about doing that? 278 00:15:22,622 --> 00:15:25,330 Some previous lectures, we've learned a few different components. 279 00:15:25,330 --> 00:15:26,680 We've talked about buttons. 280 00:15:26,680 --> 00:15:28,930 We've talked about text, and we've talked about view. 281 00:15:28,930 --> 00:15:32,740 And so using those, we can sort of start to create this application 282 00:15:32,740 --> 00:15:36,330 where we can see what contacts we have. 283 00:15:36,330 --> 00:15:41,500 And so using things that we've seen in previous lectures, you would use a view 284 00:15:41,500 --> 00:15:46,240 and wrap a bunch of texts to show those contacts. 285 00:15:46,240 --> 00:15:49,480 And so right now, we've imported contacts, 286 00:15:49,480 --> 00:15:54,130 which is a big long list of contacts, and we're 287 00:15:54,130 --> 00:15:58,120 going to go ahead and display that in that view. 288 00:15:58,120 --> 00:16:01,930 And so how might we go from an array of contacts 289 00:16:01,930 --> 00:16:04,420 to a bunch of people in that view? 290 00:16:04,420 --> 00:16:08,140 291 00:16:08,140 --> 00:16:11,200 Are there any functions that we've learned thus far, where 292 00:16:11,200 --> 00:16:13,750 we take an array and turn that array of values 293 00:16:13,750 --> 00:16:20,270 and turn that into something like an array of elements? 294 00:16:20,270 --> 00:16:21,268 Yeah? 295 00:16:21,268 --> 00:16:22,510 AUDIENCE: [INAUDIBLE] 296 00:16:22,510 --> 00:16:22,680 SPEAKER 1: Yeah. 297 00:16:22,680 --> 00:16:24,170 Map would be a great example here. 298 00:16:24,170 --> 00:16:28,540 So what map does is it takes an array, and for every single value in the array 299 00:16:28,540 --> 00:16:31,630 it runs it through a function and takes the return value of the function 300 00:16:31,630 --> 00:16:33,430 and returns a new array. 301 00:16:33,430 --> 00:16:39,670 And so right now, we have imported contacts 302 00:16:39,670 --> 00:16:43,074 from contacts, which as we saw, is just an array of people. 303 00:16:43,074 --> 00:16:45,490 And if we are able to turn that into an array of elements, 304 00:16:45,490 --> 00:16:48,480 we can actually use React to render those elements. 305 00:16:48,480 --> 00:16:50,920 And so let's actually do that here. 306 00:16:50,920 --> 00:16:54,250 307 00:16:54,250 --> 00:16:59,627 So we can do contacts dot map and what do we 308 00:16:59,627 --> 00:17:01,210 want to do for each of these contacts? 309 00:17:01,210 --> 00:17:08,810 310 00:17:08,810 --> 00:17:11,829 Well, maybe we should render some text to the screen. 311 00:17:11,829 --> 00:17:16,530 And so let's just start with this, where the text is the contact's name. 312 00:17:16,530 --> 00:17:26,010 313 00:17:26,010 --> 00:17:27,420 And we see that it's rendering. 314 00:17:27,420 --> 00:17:36,570 So I see 1, 2, 10, maybe 50 or so contacts, 315 00:17:36,570 --> 00:17:39,390 but when I try to scroll nothing happens because as we 316 00:17:39,390 --> 00:17:44,280 saw earlier, unlike in mobile, when we have 317 00:17:44,280 --> 00:17:47,010 views that are larger than the viewport, there's 318 00:17:47,010 --> 00:17:49,560 actually no way for React Native to automatically add 319 00:17:49,560 --> 00:17:50,680 the scrolling for you. 320 00:17:50,680 --> 00:17:56,020 And so we have to actually have some additional components to handle that. 321 00:17:56,020 --> 00:17:58,770 And so as we talked about, we have this thing called a ScrollView, 322 00:17:58,770 --> 00:18:01,060 and so this is the most basic scrolling view, 323 00:18:01,060 --> 00:18:03,508 and it will render all of its children before appearing. 324 00:18:03,508 --> 00:18:06,260 325 00:18:06,260 --> 00:18:08,640 If we want to render an array of data, as we saw, 326 00:18:08,640 --> 00:18:11,780 we can just use that dot map function. 327 00:18:11,780 --> 00:18:15,706 And so now, let's try just replacing this view with the ScrollView. 328 00:18:15,706 --> 00:18:20,270 329 00:18:20,270 --> 00:18:24,680 So all we changed was replacing view with ScrollView, 330 00:18:24,680 --> 00:18:26,975 and now, we have a view that scrolls. 331 00:18:26,975 --> 00:18:31,820 332 00:18:31,820 --> 00:18:35,660 One thing you notice, is that we have a warning at the bottom of the screen. 333 00:18:35,660 --> 00:18:38,390 It says, each child in an array or iterator 334 00:18:38,390 --> 00:18:39,910 should have unique key property. 335 00:18:39,910 --> 00:18:44,070 336 00:18:44,070 --> 00:18:47,190 So what does that mean? 337 00:18:47,190 --> 00:18:50,940 So this is actually something that reacts uses for performance reasons. 338 00:18:50,940 --> 00:18:55,320 Because if you can imagine, say we have a list of items. 339 00:18:55,320 --> 00:19:00,540 340 00:19:00,540 --> 00:19:05,860 That list is Jordan and David. 341 00:19:05,860 --> 00:19:10,590 342 00:19:10,590 --> 00:19:13,970 So in previous lectures, we talked about this thing called the React's tree 343 00:19:13,970 --> 00:19:16,140 or the React virtual dom. 344 00:19:16,140 --> 00:19:19,560 And what that is, is React's way of maintaining all of its components 345 00:19:19,560 --> 00:19:24,579 that it's rendered in some tree like data structure. 346 00:19:24,579 --> 00:19:26,370 And so we might have something like a list. 347 00:19:26,370 --> 00:19:31,600 348 00:19:31,600 --> 00:19:36,799 And then within that list we have this thing called Jordan and this thing 349 00:19:36,799 --> 00:19:37,340 called David. 350 00:19:37,340 --> 00:19:42,330 351 00:19:42,330 --> 00:19:46,770 So in previous lectures, we talked about how when we add something 352 00:19:46,770 --> 00:19:51,300 or when we rerender, React will actually recalculate this dom 353 00:19:51,300 --> 00:19:55,190 and then only do what's necessary for a new rerender. 354 00:19:55,190 --> 00:19:57,350 So say we added somebody to this list. 355 00:19:57,350 --> 00:20:01,650 356 00:20:01,650 --> 00:20:03,657 So say we add Yowan to this list. 357 00:20:03,657 --> 00:20:05,490 In this example, it's pretty easy because we 358 00:20:05,490 --> 00:20:09,195 have Jordan is where he was before, David was where he was before, 359 00:20:09,195 --> 00:20:11,070 and now we just add Yowan to the very bottom. 360 00:20:11,070 --> 00:20:15,420 And so React can see oh, Jordan, David, easy, let's just add Yowan. 361 00:20:15,420 --> 00:20:19,310 362 00:20:19,310 --> 00:20:22,070 And so in this example, it's fairly easy to just tell oh, we just 363 00:20:22,070 --> 00:20:25,840 added somebody to the bottom of list because the top two stayed the same. 364 00:20:25,840 --> 00:20:36,539 But say rather than adding Yowan to the bottom of the list, 365 00:20:36,539 --> 00:20:38,580 say we actually added him to the top of the list. 366 00:20:38,580 --> 00:20:44,150 367 00:20:44,150 --> 00:20:48,140 So now when React does it's diffing, so when it compares all of the nodes, 368 00:20:48,140 --> 00:20:52,150 it says, oh, we used to have Jordan in position one, 369 00:20:52,150 --> 00:20:54,460 and now we have Yowan in position one. 370 00:20:54,460 --> 00:20:55,300 That's not good. 371 00:20:55,300 --> 00:20:57,160 We should update this to be Yowan. 372 00:20:57,160 --> 00:21:00,490 373 00:21:00,490 --> 00:21:01,690 What's in position two? 374 00:21:01,690 --> 00:21:03,400 Oh, position two is now Jordan. 375 00:21:03,400 --> 00:21:04,480 It used to be David. 376 00:21:04,480 --> 00:21:05,970 We better update that. 377 00:21:05,970 --> 00:21:09,640 378 00:21:09,640 --> 00:21:12,280 And now we see in the third position here, oh, that's new. 379 00:21:12,280 --> 00:21:13,150 We better add David. 380 00:21:13,150 --> 00:21:17,870 381 00:21:17,870 --> 00:21:22,282 So does anybody see why that might not be ideal? 382 00:21:22,282 --> 00:21:23,990 There is actually a shorter route, right? 383 00:21:23,990 --> 00:21:27,590 Rather than replacing Yowan for Jordan, and rather 384 00:21:27,590 --> 00:21:31,580 than replacing David with Jordan here, we 385 00:21:31,580 --> 00:21:35,700 could have just added Yowan to the beginning of the list there. 386 00:21:35,700 --> 00:21:40,670 And so if you could imagine, if this list is 1,000 things long, 387 00:21:40,670 --> 00:21:45,599 it might not be trivial to know exactly where things should be moved 388 00:21:45,599 --> 00:21:48,140 and where things should actually just be replaced or updated. 389 00:21:48,140 --> 00:21:51,375 And so React actually implements this by using these things called, keys. 390 00:21:51,375 --> 00:21:56,810 391 00:21:56,810 --> 00:22:01,220 And so how can we tell that this Jordan is the same as this Jordan here? 392 00:22:01,220 --> 00:22:03,930 What if you have multiple people in the list called, Jordan? 393 00:22:03,930 --> 00:22:06,410 And so in our example we have a bunch of contacts. 394 00:22:06,410 --> 00:22:09,680 What if a few contacts have the same name? 395 00:22:09,680 --> 00:22:10,580 That might be true. 396 00:22:10,580 --> 00:22:12,980 We can pretty much guarantee that multiple contacts won't 397 00:22:12,980 --> 00:22:14,819 have phone numbers, but there's no-- 398 00:22:14,819 --> 00:22:16,610 won't have the same phone numbers, that is. 399 00:22:16,610 --> 00:22:18,410 There's no way for React to inherently know 400 00:22:18,410 --> 00:22:24,070 that oh, this is a unique key in the object that we have here. 401 00:22:24,070 --> 00:22:27,050 And so what it has done to solve this, is it actually 402 00:22:27,050 --> 00:22:29,030 uses this thing called a key. 403 00:22:29,030 --> 00:22:31,580 And so anytime we have a list of data, React 404 00:22:31,580 --> 00:22:34,147 says, oh, one of the things in that-- one 405 00:22:34,147 --> 00:22:36,980 of the props that you should pass for each of the things in the list 406 00:22:36,980 --> 00:22:38,600 is this thing called a key. 407 00:22:38,600 --> 00:22:43,290 And so if we see here in this example, say we had-- 408 00:22:43,290 --> 00:22:44,210 back up a few. 409 00:22:44,210 --> 00:22:47,510 410 00:22:47,510 --> 00:22:52,520 Say we had given Jordan and David a key of one and two, 411 00:22:52,520 --> 00:22:55,170 and now we added Yowan at the top. 412 00:22:55,170 --> 00:23:02,330 React can just see oh, look, what used to be key number one here, 413 00:23:02,330 --> 00:23:04,122 we used to be key number two in this place. 414 00:23:04,122 --> 00:23:07,205 We can see that they've actually just moved to the second and third places 415 00:23:07,205 --> 00:23:07,880 here. 416 00:23:07,880 --> 00:23:12,680 And so we can actually use that and just add Yowan here. 417 00:23:12,680 --> 00:23:16,250 And so React can do the thing that was actually the most efficient, 418 00:23:16,250 --> 00:23:21,080 and the way it does that is by comparing keys rather than trying 419 00:23:21,080 --> 00:23:26,550 to figure out exactly which value is the most important. 420 00:23:26,550 --> 00:23:31,740 And so that's why in this example here, we 421 00:23:31,740 --> 00:23:39,810 passed this element, a long list of elements with names, 422 00:23:39,810 --> 00:23:43,410 and React is complaining, hey, I can't do the most efficient thing 423 00:23:43,410 --> 00:23:45,570 because you never told me what keys there are. 424 00:23:45,570 --> 00:23:48,580 And I'm sure that in this list of 1,000 names, maybe 425 00:23:48,580 --> 00:23:50,930 there is one or two that repeat. 426 00:23:50,930 --> 00:23:53,880 And so React, when we want to update later down the line, 427 00:23:53,880 --> 00:23:57,820 it doesn't know what it should be doing with those nodes, and so it says, 428 00:23:57,820 --> 00:24:00,860 hey, just as a warning, you should actually pass me some keys. 429 00:24:00,860 --> 00:24:06,600 430 00:24:06,600 --> 00:24:21,620 And so if you actually look at the code over here, we actually assigned keys. 431 00:24:21,620 --> 00:24:24,220 And so when we created all those contacts, 432 00:24:24,220 --> 00:24:27,250 we mapped this function called, assign keys. 433 00:24:27,250 --> 00:24:29,320 And as you recall from previous lectures, 434 00:24:29,320 --> 00:24:35,800 map passes two values to each of the function invocations. 435 00:24:35,800 --> 00:24:38,590 The first one being whatever the value is in the array, 436 00:24:38,590 --> 00:24:40,600 and the second one being the index. 437 00:24:40,600 --> 00:24:45,220 And so we're actually using that index as the key here. 438 00:24:45,220 --> 00:24:55,404 And so now in this example, we can say, hey, React, we have keys for you 439 00:24:55,404 --> 00:24:56,820 and we'll actually pass it to you. 440 00:24:56,820 --> 00:25:00,090 And so you can say the key is the contacts key. 441 00:25:00,090 --> 00:25:05,250 442 00:25:05,250 --> 00:25:11,010 And so by doing that we pass React a key for each of the things in the array, 443 00:25:11,010 --> 00:25:18,310 and now it can do its magic and not show us that error. 444 00:25:18,310 --> 00:25:26,100 So any questions on passing arrays to elements and why keys are useful? 445 00:25:26,100 --> 00:25:34,219 446 00:25:34,219 --> 00:25:36,510 So let's actually build out this app a little bit more. 447 00:25:36,510 --> 00:25:40,524 So right now, we're showing our users a bunch of contact names, 448 00:25:40,524 --> 00:25:42,690 but that's not very helpful for an app that's trying 449 00:25:42,690 --> 00:25:45,020 to tell people their phone numbers. 450 00:25:45,020 --> 00:25:49,740 And so let's also display the phone number. 451 00:25:49,740 --> 00:25:51,721 So probably need to wrap this in a view. 452 00:25:51,721 --> 00:25:57,020 453 00:25:57,020 --> 00:26:03,930 And this also provide the contacts phone number. 454 00:26:03,930 --> 00:26:16,730 455 00:26:16,730 --> 00:26:21,560 And so now when we map through the contacts, we create these views, 456 00:26:21,560 --> 00:26:25,070 and we still pass that key like we were before, and inside that view 457 00:26:25,070 --> 00:26:28,930 we're passing the contacts name and the contacts phone number. 458 00:26:28,930 --> 00:26:32,930 And so now when this very rerenders we can 459 00:26:32,930 --> 00:26:34,834 see a list of names and phone numbers. 460 00:26:34,834 --> 00:26:36,750 And so our app is starting to come into place. 461 00:26:36,750 --> 00:26:42,300 462 00:26:42,300 --> 00:26:46,470 So does anybody see an opportunity for making this code a little bit more 463 00:26:46,470 --> 00:26:47,820 readable? 464 00:26:47,820 --> 00:26:52,560 Right now every time we're mapping over these contacts, 465 00:26:52,560 --> 00:26:58,700 we're using this element that we're declaring in line. 466 00:26:58,700 --> 00:27:01,410 But we can actually make our code a little bit more readable by 467 00:27:01,410 --> 00:27:06,840 rather than having just an arbitrary few lines creating a element here. 468 00:27:06,840 --> 00:27:09,780 We can actually abstract them out into its own component. 469 00:27:09,780 --> 00:27:12,840 And so as we talked about in previous lectures, 470 00:27:12,840 --> 00:27:15,630 React allows us to break our code up into smaller components 471 00:27:15,630 --> 00:27:19,590 and allows these components to be pulled in to other components. 472 00:27:19,590 --> 00:27:23,410 And so rather than having these four lines declared in line here, 473 00:27:23,410 --> 00:27:27,270 let's actually create this concept of a row. 474 00:27:27,270 --> 00:27:39,660 475 00:27:39,660 --> 00:27:44,190 And so now we have a stateless functional component, 476 00:27:44,190 --> 00:27:46,640 which is just a component that takes a function that 477 00:27:46,640 --> 00:27:48,530 takes props and returns an element. 478 00:27:48,530 --> 00:27:51,530 And so right now, we have this thing called contact dot key, contact dot 479 00:27:51,530 --> 00:27:56,870 name, contact dot phone, but instead we should be looking at the props. 480 00:27:56,870 --> 00:28:02,710 And so let's call this props dot key, props dot name, and props dot phone. 481 00:28:02,710 --> 00:28:11,600 482 00:28:11,600 --> 00:28:16,046 And so down here, we can actually just use this real component. 483 00:28:16,046 --> 00:28:19,700 484 00:28:19,700 --> 00:28:24,066 And so we need to pass to the relevant component the prop that it's expecting. 485 00:28:24,066 --> 00:28:24,940 And so that are what? 486 00:28:24,940 --> 00:28:28,180 The key, is the contacts key. 487 00:28:28,180 --> 00:28:32,500 488 00:28:32,500 --> 00:28:33,630 What else was it expecting? 489 00:28:33,630 --> 00:28:39,652 The name, which is the contact dot name and the phone, 490 00:28:39,652 --> 00:28:40,860 which was the contacts phone. 491 00:28:40,860 --> 00:28:44,230 492 00:28:44,230 --> 00:28:48,630 And so basically, we're taking all of the keys of each contact 493 00:28:48,630 --> 00:28:50,840 and passing them down-- 494 00:28:50,840 --> 00:28:52,530 the exact values down. 495 00:28:52,530 --> 00:28:55,990 So just actually, like we saw earlier, how you can do dot, 496 00:28:55,990 --> 00:29:02,460 dot, dot the object, which will spread out all the key value pairs of object 497 00:29:02,460 --> 00:29:04,720 and pass it to a new object, you can actually also use 498 00:29:04,720 --> 00:29:07,630 that in line in React elements. 499 00:29:07,630 --> 00:29:11,290 And so rather than just being very explicit in declaring 500 00:29:11,290 --> 00:29:14,430 oh, let's pass key, which is the contacts key, name, 501 00:29:14,430 --> 00:29:17,600 which is the contacts name, and phone, which is the contact phone, 502 00:29:17,600 --> 00:29:19,530 we can actually have a shortcut. 503 00:29:19,530 --> 00:29:21,750 We can actually say, for every single key value 504 00:29:21,750 --> 00:29:30,422 pair of the object called contact, pass closing those props. 505 00:29:30,422 --> 00:29:32,130 And so here again, you see that dot, dot, 506 00:29:32,130 --> 00:29:37,860 dot notation, which is a very convenient way of taking a bunch of key value 507 00:29:37,860 --> 00:29:41,460 pairs of an object and passing them either to a new object, as we 508 00:29:41,460 --> 00:29:44,610 saw earlier, or to a React component as we see here. 509 00:29:44,610 --> 00:29:50,540 510 00:29:50,540 --> 00:29:56,360 And so if we save and run that, we see a key is not a prop. 511 00:29:56,360 --> 00:30:02,300 So one caveat about these keys here is that you can't-- 512 00:30:02,300 --> 00:30:07,880 having it as a prop here in it's own component is not very helpful for React 513 00:30:07,880 --> 00:30:11,300 because React is actually looking at the element not the-- 514 00:30:11,300 --> 00:30:15,080 the element that you map over, not necessarily the element 515 00:30:15,080 --> 00:30:25,509 that that element returns, which is a long winded explanation for just saying 516 00:30:25,509 --> 00:30:26,300 you should do this. 517 00:30:26,300 --> 00:30:34,020 518 00:30:34,020 --> 00:30:40,650 So we need to pass the key in to this element, rather than using it as a prop 519 00:30:40,650 --> 00:30:41,220 up there. 520 00:30:41,220 --> 00:30:43,470 Actually, which we did, it was just complaining about. 521 00:30:43,470 --> 00:30:49,420 522 00:30:49,420 --> 00:30:53,540 So we were in fact, passing the key because it gets spread out here. 523 00:30:53,540 --> 00:30:57,172 But since I was also passing it into the view up there, the view is saying, hey, 524 00:30:57,172 --> 00:30:58,880 I'm not expecting this prop called a key. 525 00:30:58,880 --> 00:31:01,670 526 00:31:01,670 --> 00:31:05,820 And so that should have silenced the warning over here. 527 00:31:05,820 --> 00:31:09,280 And so we see nothing visually has changed in between the two examples. 528 00:31:09,280 --> 00:31:13,180 All we did was just abstract out a smaller component called, row. 529 00:31:13,180 --> 00:31:18,370 530 00:31:18,370 --> 00:31:21,490 We could actually take this a step further in cleaning up our application. 531 00:31:21,490 --> 00:31:27,430 So why do we feel the need of declaring this component called, row 532 00:31:27,430 --> 00:31:29,197 inside app.js? 533 00:31:29,197 --> 00:31:31,780 We can actually start to break these things apart and actually 534 00:31:31,780 --> 00:31:35,770 have a new file for row, and let's do that together. 535 00:31:35,770 --> 00:31:40,142 536 00:31:40,142 --> 00:31:41,850 So I'm going to create a new file called, 537 00:31:41,850 --> 00:31:46,410 row and open it here, and just cut and paste this. 538 00:31:46,410 --> 00:31:52,610 539 00:31:52,610 --> 00:31:59,017 And let's say, import row from dot slash row. 540 00:31:59,017 --> 00:31:59,600 Save and quit. 541 00:31:59,600 --> 00:32:04,620 It's going to error for now because we actually haven't finished writing row. 542 00:32:04,620 --> 00:32:07,850 And so first, we need to import a few things, including React. 543 00:32:07,850 --> 00:32:16,070 544 00:32:16,070 --> 00:32:26,360 We need to import view, and row, and text, from React Native. 545 00:32:26,360 --> 00:32:30,860 546 00:32:30,860 --> 00:32:34,290 And lastly, we need to actually export row. 547 00:32:34,290 --> 00:32:43,440 548 00:32:43,440 --> 00:32:47,420 And so now again, we're in the same exact place in terms of UI, 549 00:32:47,420 --> 00:32:49,820 but our code looks slightly different. 550 00:32:49,820 --> 00:32:59,490 And so why might we have wanted to split this row component away from this app? 551 00:32:59,490 --> 00:33:00,620 So I went to the audience. 552 00:33:00,620 --> 00:33:04,790 Why might we consider that a good thing? 553 00:33:04,790 --> 00:33:09,420 Removing this, what's only five lines of code. 554 00:33:09,420 --> 00:33:12,170 This component out of this file and moving it to a new file. 555 00:33:12,170 --> 00:33:15,710 What benefits do we have there? 556 00:33:15,710 --> 00:33:17,510 AUDIENCE: Use it for different things. 557 00:33:17,510 --> 00:33:17,630 SPEAKER 1: Yeah. 558 00:33:17,630 --> 00:33:19,088 We can use it for different things. 559 00:33:19,088 --> 00:33:22,250 So certainly, if you have a bunch of different new files, 560 00:33:22,250 --> 00:33:24,950 we can actually pull in a row to all those files and reuse it, 561 00:33:24,950 --> 00:33:28,430 and that way if we wanted to change exactly what a single row looked like, 562 00:33:28,430 --> 00:33:31,837 we wouldn't have to do that in multiple places. 563 00:33:31,837 --> 00:33:33,420 Additionally, it's much more scalable. 564 00:33:33,420 --> 00:33:37,100 So imagine a company at maybe Facebook's size, or Facebook 565 00:33:37,100 --> 00:33:41,270 has talked about how they have over 30,000 different components. 566 00:33:41,270 --> 00:33:45,400 Imagine having 30,000 components all defined in a single file. 567 00:33:45,400 --> 00:33:48,110 That can get quite unwieldy. 568 00:33:48,110 --> 00:33:51,530 And so by splitting them out into files and splitting those files into smaller 569 00:33:51,530 --> 00:33:55,460 files, we can actually have a bunch of bite size logical pieces, 570 00:33:55,460 --> 00:33:58,329 which compose together to create one more complex piece. 571 00:33:58,329 --> 00:34:00,620 And so as we talked about in the previous lectures, how 572 00:34:00,620 --> 00:34:04,700 React allows us to break down a large complex problem 573 00:34:04,700 --> 00:34:06,950 into a bunch of small ones, this is an example 574 00:34:06,950 --> 00:34:11,630 of just taking a bite size small problem and solving it. 575 00:34:11,630 --> 00:34:16,260 And then using that bite size small problem in a slightly larger problem. 576 00:34:16,260 --> 00:34:21,500 And so as you'll see in a bunch of lectures, 577 00:34:21,500 --> 00:34:25,129 is that rather than solving a big problem all in one go, 578 00:34:25,129 --> 00:34:27,545 it's much easier to swallow off a bunch of small problems. 579 00:34:27,545 --> 00:34:34,570 580 00:34:34,570 --> 00:34:35,070 Great. 581 00:34:35,070 --> 00:34:37,360 And now, let's make this look a little bit better. 582 00:34:37,360 --> 00:34:40,710 So we have what's pretty hard to read. 583 00:34:40,710 --> 00:34:44,040 And we can just throw some styles on here to make this look better. 584 00:34:44,040 --> 00:34:50,969 And so the way that we do that is by importing StyleSheet, 585 00:34:50,969 --> 00:34:52,980 and then creating styles here. 586 00:34:52,980 --> 00:34:57,165 587 00:34:57,165 --> 00:35:10,919 So let's just call this a row and maybe pass in some padding and call that it. 588 00:35:10,919 --> 00:35:20,400 589 00:35:20,400 --> 00:35:22,340 And so now, it's slightly easier to read. 590 00:35:22,340 --> 00:35:26,310 591 00:35:26,310 --> 00:35:29,320 So we have this button that is supposed to toggle the contact list, 592 00:35:29,320 --> 00:35:31,220 but it currently isn't doing anything. 593 00:35:31,220 --> 00:35:35,220 Until-- let's actually add that functionality to our app. 594 00:35:35,220 --> 00:35:39,920 595 00:35:39,920 --> 00:35:43,310 So we already have the logic where we have this Boolean flag called, 596 00:35:43,310 --> 00:35:44,750 show contacts. 597 00:35:44,750 --> 00:35:48,860 We have the logic, which will flip that flag 598 00:35:48,860 --> 00:35:53,330 and so every single time this toggle contacts function is invoked, 599 00:35:53,330 --> 00:35:55,910 it will update the show contacts state to be 600 00:35:55,910 --> 00:36:00,110 whatever the previous-- the opposite of what other previous one. 601 00:36:00,110 --> 00:36:03,350 And we already have a button here, which invokes that. 602 00:36:03,350 --> 00:36:08,300 And so let's actually figure out some way of using the ScrollView 603 00:36:08,300 --> 00:36:09,500 and flipping it on and off. 604 00:36:09,500 --> 00:36:13,330 605 00:36:13,330 --> 00:36:15,320 So there's a few different ways to do that. 606 00:36:15,320 --> 00:36:25,130 We could do, if the state is telling us to show the contacts 607 00:36:25,130 --> 00:36:31,290 then we can return one thing, and if not, we can return something else. 608 00:36:31,290 --> 00:36:42,590 And so here, you might imagine that we can paste this exactly 609 00:36:42,590 --> 00:36:46,790 and if not, we can do that. 610 00:36:46,790 --> 00:36:49,830 And that would work perfectly fine. 611 00:36:49,830 --> 00:36:52,520 So we can click toggle contacts, and we'll toggle the contacts. 612 00:36:52,520 --> 00:36:56,930 If you click it again, it disappears. 613 00:36:56,930 --> 00:36:58,820 Why might that be slightly un-ideal? 614 00:36:58,820 --> 00:37:02,357 615 00:37:02,357 --> 00:37:04,440 What if we started adding some complexity to that? 616 00:37:04,440 --> 00:37:06,780 Maybe added a button for adding contacts. 617 00:37:06,780 --> 00:37:09,900 Maybe added a button for sorting the contacts. 618 00:37:09,900 --> 00:37:12,750 Where would you have to update the code? 619 00:37:12,750 --> 00:37:13,800 You have to update here. 620 00:37:13,800 --> 00:37:15,335 We also have to update here. 621 00:37:15,335 --> 00:37:18,000 And so for every single conditional render that we do, 622 00:37:18,000 --> 00:37:24,480 we'd also have to update that for anything that we want to add. 623 00:37:24,480 --> 00:37:27,350 And so there's actually some sort of shorthand in order to do that. 624 00:37:27,350 --> 00:37:36,750 625 00:37:36,750 --> 00:37:42,140 We could say in here, using JavaScript, we could say, 626 00:37:42,140 --> 00:37:54,390 if this dot state dot show contacts then return this thing, 627 00:37:54,390 --> 00:37:55,460 otherwise, return all. 628 00:37:55,460 --> 00:37:59,780 629 00:37:59,780 --> 00:38:01,870 And so this is called a ternary. 630 00:38:01,870 --> 00:38:03,830 You may or may not have seen it before. 631 00:38:03,830 --> 00:38:08,890 But it's basically saying, given some expression, if that evaluates to true, 632 00:38:08,890 --> 00:38:11,590 return what's after the question mark. 633 00:38:11,590 --> 00:38:16,620 Otherwise, if it returns a falsie value, return whatever is second here. 634 00:38:16,620 --> 00:38:19,840 And so this would be a slightly more legible way 635 00:38:19,840 --> 00:38:23,150 of doing exactly what we did before. 636 00:38:23,150 --> 00:38:27,220 So in other words, take the value of this dot state dot show contacts. 637 00:38:27,220 --> 00:38:31,150 If it's a truthy value then return whatever is after the question mark. 638 00:38:31,150 --> 00:38:33,820 So the first thing, which is the ScrollView. 639 00:38:33,820 --> 00:38:36,880 Otherwise, return null. 640 00:38:36,880 --> 00:38:40,420 And if you null when you pass it on to a React element, 641 00:38:40,420 --> 00:38:43,760 it just renders it nothing. 642 00:38:43,760 --> 00:38:49,280 And so this again, does exactly what we had before. 643 00:38:49,280 --> 00:38:52,790 But it turns out there's even a better way to do this. 644 00:38:52,790 --> 00:38:58,840 So we could actually, just do this dot show contacts and this. 645 00:38:58,840 --> 00:39:03,710 646 00:39:03,710 --> 00:39:06,110 Because the and operator, does what? 647 00:39:06,110 --> 00:39:11,975 If the first thing is true, it returns whatever's next. 648 00:39:11,975 --> 00:39:14,930 If the first thing is false, it just returns false. 649 00:39:14,930 --> 00:39:17,600 And so false and null both just disappear when 650 00:39:17,600 --> 00:39:19,670 you're trying to render those in React. 651 00:39:19,670 --> 00:39:22,970 And so this is just saying, hey, if this is true return this thing. 652 00:39:22,970 --> 00:39:24,730 If it's false, just return false. 653 00:39:24,730 --> 00:39:26,646 And it's the same as rendering something null. 654 00:39:26,646 --> 00:39:29,580 It's just nonexistent. 655 00:39:29,580 --> 00:39:33,530 So this again, does the same exact thing as we did in the previous two examples, 656 00:39:33,530 --> 00:39:37,320 but this in my opinion, is the most legible. 657 00:39:37,320 --> 00:39:41,730 And so if we hop over to the UI we see again, that it does the same thing. 658 00:39:41,730 --> 00:39:47,360 But notice, as I click toggle it takes two or three seconds 659 00:39:47,360 --> 00:39:49,070 to render all of these contacts. 660 00:39:49,070 --> 00:39:59,720 And say, we have a very popular person and they actually have 10,000 friends. 661 00:39:59,720 --> 00:40:02,300 Now, when we toggle contacts it's-- 662 00:40:02,300 --> 00:40:03,670 two, three, four. 663 00:40:03,670 --> 00:40:06,020 It's going to take a few seconds. 664 00:40:06,020 --> 00:40:09,260 And so why is it taking so long? 665 00:40:09,260 --> 00:40:14,780 So as we saw, ScrollView will actually render all of its children 666 00:40:14,780 --> 00:40:18,020 before appearing, which is somewhat un-ideal if you 667 00:40:18,020 --> 00:40:21,380 have a very long list to render, because even though JavaScript and React are 668 00:40:21,380 --> 00:40:26,900 extremely fast, when you want to take 10,000 elements, map over all of those, 669 00:40:26,900 --> 00:40:29,750 create 10,000 more elements and render all of those, 670 00:40:29,750 --> 00:40:32,780 it can take upwards of 20, 30 seconds. 671 00:40:32,780 --> 00:40:38,930 And only now has it recently rendered, which can be a problem. 672 00:40:38,930 --> 00:40:41,990 Say you have a very popular person with 10,000 friends. 673 00:40:41,990 --> 00:40:44,690 It would be annoying for them if every single time they 674 00:40:44,690 --> 00:40:48,080 want to open this app it takes 20 or 30 seconds to render. 675 00:40:48,080 --> 00:40:51,060 676 00:40:51,060 --> 00:40:55,770 So let's look at a way to making that faster. 677 00:40:55,770 --> 00:40:58,860 And if you want to check out the docs for ScrollView, 678 00:40:58,860 --> 00:41:02,270 they're linked in the slides. 679 00:41:02,270 --> 00:41:04,040 So there's this thing called a FlatList. 680 00:41:04,040 --> 00:41:08,390 So FlatList is a very performant scrolling view for rendering data. 681 00:41:08,390 --> 00:41:10,990 And what it does is-- it's called virtualized, 682 00:41:10,990 --> 00:41:15,640 which it only renders what's needed at the time that you're viewing it. 683 00:41:15,640 --> 00:41:20,660 Or in other words, only the visible rows are rendered in the first cycle. 684 00:41:20,660 --> 00:41:23,266 And so in this example here-- 685 00:41:23,266 --> 00:41:26,310 well, it's going to take a few seconds. 686 00:41:26,310 --> 00:41:32,020 That's actually-- in this example here, what 687 00:41:32,020 --> 00:41:34,380 happens when you want to render a FlatList is 688 00:41:34,380 --> 00:41:38,392 it will only render these elements. 689 00:41:38,392 --> 00:41:41,350 And as you scroll down, it will say, oh, I need to render more elements 690 00:41:41,350 --> 00:41:43,540 and go ahead and render those one by one. 691 00:41:43,540 --> 00:41:48,750 And so as you can imagine, when you want to create that list for the first time, 692 00:41:48,750 --> 00:41:53,020 it only has to do 1, 2, 3, 4, 5, 10 or so elements, which 693 00:41:53,020 --> 00:41:57,580 should be blazing fast At least a couple orders of magnitude 694 00:41:57,580 --> 00:42:02,470 faster than rendering 1,000 of them. 695 00:42:02,470 --> 00:42:07,000 And what this means is as you scroll down what used to be at the top 696 00:42:07,000 --> 00:42:08,530 might actually just be recycled. 697 00:42:08,530 --> 00:42:12,310 It might be used again in some lower cell, which 698 00:42:12,310 --> 00:42:15,520 means that any rows that leave visibility might be unmounted. 699 00:42:15,520 --> 00:42:18,106 So if you're maintaining components state in each of those, 700 00:42:18,106 --> 00:42:20,230 you have to figure out some sort of way to maintain 701 00:42:20,230 --> 00:42:22,130 that outside of the component itself. 702 00:42:22,130 --> 00:42:25,090 In a future lecture, we'll talk about some data 703 00:42:25,090 --> 00:42:27,800 handling libraries that allow you to do that. 704 00:42:27,800 --> 00:42:32,330 But for now, just avoid using any component to state in these rows. 705 00:42:32,330 --> 00:42:38,492 706 00:42:38,492 --> 00:42:39,450 So how do you use this? 707 00:42:39,450 --> 00:42:41,730 So we have to pass a couple things. 708 00:42:41,730 --> 00:42:43,284 We have to pass the data. 709 00:42:43,284 --> 00:42:46,450 And so as you can imagine, if we have some sort of list that's the rendering 710 00:42:46,450 --> 00:42:48,970 data, it needs to have the data. 711 00:42:48,970 --> 00:42:53,100 And we also need to tell it how do we render each of these data points. 712 00:42:53,100 --> 00:42:57,070 And so we pass an array of that data and a renderItem function. 713 00:42:57,070 --> 00:43:00,840 And so this renderItem function, it's a function that takes an item 714 00:43:00,840 --> 00:43:07,056 and returns an element, similar to the row component that we declared earlier. 715 00:43:07,056 --> 00:43:08,520 And so let's go ahead and use this. 716 00:43:08,520 --> 00:43:14,740 717 00:43:14,740 --> 00:43:18,240 So here, we have a ScrollView, but let's actually call this a FlatView instead. 718 00:43:18,240 --> 00:43:23,500 719 00:43:23,500 --> 00:43:26,010 And so unlike the ScrollView, where the ScrollView, 720 00:43:26,010 --> 00:43:30,650 we actually declare all the rows as children, for the FlatView 721 00:43:30,650 --> 00:43:34,890 we're actually going to pass props. 722 00:43:34,890 --> 00:43:38,040 And FlatView is smart enough to know, hey, given these props, 723 00:43:38,040 --> 00:43:39,870 I know how to render all of my children. 724 00:43:39,870 --> 00:43:43,919 So I can go ahead and do that in a very optimized manner. 725 00:43:43,919 --> 00:43:45,960 And so we can actually just get rid of this here. 726 00:43:45,960 --> 00:43:50,850 727 00:43:50,850 --> 00:43:53,620 And let's have a FlatView. 728 00:43:53,620 --> 00:43:56,845 We need to pass it data, and so the data are going to be the contacts. 729 00:43:56,845 --> 00:43:59,590 730 00:43:59,590 --> 00:44:02,170 And we also need to pass it this thing called, renderItem. 731 00:44:02,170 --> 00:44:05,360 732 00:44:05,360 --> 00:44:15,520 And renderItem takes some sort of object and returns 733 00:44:15,520 --> 00:44:18,110 whatever we want to render for that item. 734 00:44:18,110 --> 00:44:21,610 And so for each item, we want to render a row. 735 00:44:21,610 --> 00:44:23,950 And what are we passing to the row? 736 00:44:23,950 --> 00:44:28,580 Well, we want to object spread something, 737 00:44:28,580 --> 00:44:31,140 and so let's just do object dot item. 738 00:44:31,140 --> 00:44:37,280 739 00:44:37,280 --> 00:44:39,960 And so I only know this because I read the docs, 740 00:44:39,960 --> 00:44:45,480 but the object that's passed to the renderItem function, 741 00:44:45,480 --> 00:44:49,570 actually has this thing called a dot, called an item as part of the object. 742 00:44:49,570 --> 00:44:53,820 And so I go ahead and use that here. 743 00:44:53,820 --> 00:44:56,730 And so we've passed it renderItem and we've passed it some data. 744 00:44:56,730 --> 00:44:59,890 745 00:44:59,890 --> 00:45:03,328 And I believe that is all that we need to pass it. 746 00:45:03,328 --> 00:45:04,720 And so let's see what happens. 747 00:45:04,720 --> 00:45:16,610 748 00:45:16,610 --> 00:45:18,965 That's actually-- real quickly. 749 00:45:18,965 --> 00:45:20,090 Sandy, will you check this? 750 00:45:20,090 --> 00:45:41,510 751 00:45:41,510 --> 00:45:44,180 Let's actually, just declare this outside the function 752 00:45:44,180 --> 00:45:46,190 and see if I made a typo. 753 00:45:46,190 --> 00:45:58,565 754 00:45:58,565 --> 00:45:59,555 FlatList, ah. 755 00:45:59,555 --> 00:46:06,990 756 00:46:06,990 --> 00:46:10,790 And I also imported FlatView instead of FlatList. 757 00:46:10,790 --> 00:46:13,720 758 00:46:13,720 --> 00:46:14,900 All right. 759 00:46:14,900 --> 00:46:19,790 Now, we see that it goes ahead and renders almost instantly. 760 00:46:19,790 --> 00:46:23,600 And so as we see again, pretty instantly. 761 00:46:23,600 --> 00:46:29,380 And so let's actually scale this up, and do again 762 00:46:29,380 --> 00:46:33,330 that example with 10,000 contacts. 763 00:46:33,330 --> 00:46:41,587 And again, we see that it is no slower in rendering those 10,000. 764 00:46:41,587 --> 00:46:43,920 And I put that into air quotes because really, it's only 765 00:46:43,920 --> 00:46:46,650 rendering what's on the screen now. 766 00:46:46,650 --> 00:46:51,630 And as you scroll down, it actually just will 767 00:46:51,630 --> 00:46:55,530 render the things as we get to them. 768 00:46:55,530 --> 00:47:04,610 769 00:47:04,610 --> 00:47:08,860 So one downside or upside, depending on how you look at it, of FlatList 770 00:47:08,860 --> 00:47:10,800 is that it only updates if props or changed. 771 00:47:10,800 --> 00:47:14,260 And that's actually an optimization done by the React team 772 00:47:14,260 --> 00:47:18,080 so it doesn't necessarily rerender. 773 00:47:18,080 --> 00:47:22,610 And so let's actually add a feature to our application here. 774 00:47:22,610 --> 00:47:29,110 And so right now, say I'm looking for a friend named Aaron. 775 00:47:29,110 --> 00:47:33,410 There is really no way that we've organized this 776 00:47:33,410 --> 00:47:36,380 so that I can find Aaron easily. 777 00:47:36,380 --> 00:47:40,160 And so one thing that we can do is we can actually, sort this alphabetically. 778 00:47:40,160 --> 00:47:41,910 So if I want to find a friend named Aaron, 779 00:47:41,910 --> 00:47:43,550 it's very easy because he's at the top. 780 00:47:43,550 --> 00:47:45,560 His name starts with A-A. 781 00:47:45,560 --> 00:47:48,814 And so let's add this feature to the app. 782 00:47:48,814 --> 00:47:51,730 And so in order to do that, we need to have some sort of button that's 783 00:47:51,730 --> 00:47:55,450 going to sort things, and we're going to have to actually sort things as we go. 784 00:47:55,450 --> 00:47:58,870 785 00:47:58,870 --> 00:48:00,720 So let's define a function called, sort. 786 00:48:00,720 --> 00:48:04,290 787 00:48:04,290 --> 00:48:07,950 And what it does is it will take the list of contacts 788 00:48:07,950 --> 00:48:10,050 and go ahead and sort it. 789 00:48:10,050 --> 00:48:19,615 So let's do, this dot setState and take the contacts. 790 00:48:19,615 --> 00:48:23,890 791 00:48:23,890 --> 00:48:32,580 Take the previous states contacts and invoke this thing called, sort. 792 00:48:32,580 --> 00:48:37,010 And so as part of the array prototype, all of arrays 793 00:48:37,010 --> 00:48:39,125 have this method called, sort. 794 00:48:39,125 --> 00:48:42,450 795 00:48:42,450 --> 00:48:48,270 And sort will take a function that compares two values 796 00:48:48,270 --> 00:48:52,020 and just will sort them in increasing order. 797 00:48:52,020 --> 00:48:55,950 And so for things like strings or things like numbers, 798 00:48:55,950 --> 00:48:58,650 it's very easy to compare those because JavaScript 799 00:48:58,650 --> 00:49:02,112 knows hey, given two numbers, it knows to use the greater than 800 00:49:02,112 --> 00:49:04,070 or the less than or the equals to compare them, 801 00:49:04,070 --> 00:49:05,236 and same thing with strings. 802 00:49:05,236 --> 00:49:08,190 But for objects, it's non-obvious to do that. 803 00:49:08,190 --> 00:49:16,930 And so that's actually what this compare names function here, is for. 804 00:49:16,930 --> 00:49:20,790 It's for us to compare these two contacts while we alphabetized them. 805 00:49:20,790 --> 00:49:24,700 And so let's actually import that into this function. 806 00:49:24,700 --> 00:49:30,030 So we want to import contacts, the default export, and also 807 00:49:30,030 --> 00:49:33,415 this thing called, compare names from contacts. 808 00:49:33,415 --> 00:49:36,040 809 00:49:36,040 --> 00:49:39,991 And let's go ahead and sort that list here. 810 00:49:39,991 --> 00:49:41,740 And so we pass them to sort that function. 811 00:49:41,740 --> 00:49:52,640 812 00:49:52,640 --> 00:49:55,710 And so when we invoke this thing called, sort, what we do 813 00:49:55,710 --> 00:50:02,430 is we take whatever the previous state contacts were and we sort them. 814 00:50:02,430 --> 00:50:05,695 Obviously, we need in state our contacts. 815 00:50:05,695 --> 00:50:10,540 816 00:50:10,540 --> 00:50:15,640 And lastly, we want to have a button that will sort things. 817 00:50:15,640 --> 00:50:19,589 818 00:50:19,589 --> 00:50:21,380 And then rather than passing contacts here, 819 00:50:21,380 --> 00:50:22,963 let's doe this dot state dot contacts. 820 00:50:22,963 --> 00:50:31,680 821 00:50:31,680 --> 00:50:34,200 So since we're so worried about performance right now, 822 00:50:34,200 --> 00:50:38,530 there's actually one big performance issue that we have right now. 823 00:50:38,530 --> 00:50:40,590 So when we declare a renderItem, what we're doing 824 00:50:40,590 --> 00:50:44,100 is we're passing it a function that we're creating right now. 825 00:50:44,100 --> 00:50:48,650 And so every single time this component rerenders, a new function is created. 826 00:50:48,650 --> 00:50:54,210 And so let's actually move that into the class. 827 00:50:54,210 --> 00:50:58,270 828 00:50:58,270 --> 00:51:00,100 That way we can just pass that reference. 829 00:51:00,100 --> 00:51:08,030 And so let's say, renderItem is this. 830 00:51:08,030 --> 00:51:10,850 831 00:51:10,850 --> 00:51:13,028 And here we can just pass this dot renderItem. 832 00:51:13,028 --> 00:51:20,010 833 00:51:20,010 --> 00:51:23,520 And so now, we see that we can toggle the contacts, 834 00:51:23,520 --> 00:51:26,850 and we see that we can sort. 835 00:51:26,850 --> 00:51:30,870 But when I click sort, nothing actually happens, 836 00:51:30,870 --> 00:51:35,806 which is a very strange bug because if we toggle again, now 837 00:51:35,806 --> 00:51:37,180 we see that everything is sorted. 838 00:51:37,180 --> 00:51:39,450 And since I was looking for my friend named Aaron, 839 00:51:39,450 --> 00:51:41,450 fortunately, I have a lot of friends named Aaron 840 00:51:41,450 --> 00:51:44,520 and they all are at the very top. 841 00:51:44,520 --> 00:51:46,144 Let's look at that again. 842 00:51:46,144 --> 00:51:47,310 So I can see in my contacts. 843 00:51:47,310 --> 00:51:49,230 They're all out of order. 844 00:51:49,230 --> 00:51:53,280 I click sort, which is supposed to sort them, but nothing actually changes. 845 00:51:53,280 --> 00:51:56,150 846 00:51:56,150 --> 00:52:01,060 But if I then toggle on and off, all of a sudden everything is sorted. 847 00:52:01,060 --> 00:52:02,850 Very interesting. 848 00:52:02,850 --> 00:52:07,690 And so we talked about how FlatList, it only updates if props are changed. 849 00:52:07,690 --> 00:52:09,950 And are we actually changing any props? 850 00:52:09,950 --> 00:52:14,790 851 00:52:14,790 --> 00:52:22,790 So we're passing down as contacts a sorted list of the previous contacts, 852 00:52:22,790 --> 00:52:25,410 but is that actually changing anything? 853 00:52:25,410 --> 00:52:30,080 So if you look at the documentation on array dot prototype dot sort, 854 00:52:30,080 --> 00:52:33,720 it actually does this in the same array. 855 00:52:33,720 --> 00:52:39,290 It actually mutates that array such that all of its values are sorted. 856 00:52:39,290 --> 00:52:41,780 But it doesn't actually create a new array itself. 857 00:52:41,780 --> 00:52:47,980 And if you remember back in previous lectures, how do we compare objects? 858 00:52:47,980 --> 00:52:50,550 They're actually just stored by reference, right? 859 00:52:50,550 --> 00:52:53,030 And so since this is the exact same array, 860 00:52:53,030 --> 00:52:55,760 when you pass it down to the child down here, 861 00:52:55,760 --> 00:52:59,280 the reference doesn't actually change. 862 00:52:59,280 --> 00:53:03,820 And so as we saw, FlatList doesn't update if it's props don't change. 863 00:53:03,820 --> 00:53:08,100 And so since we're sorting this in line, the array 864 00:53:08,100 --> 00:53:10,740 itself doesn't actually change. 865 00:53:10,740 --> 00:53:15,140 And so if we want to do this correctly, we actually 866 00:53:15,140 --> 00:53:19,080 need to use what's called immutability. 867 00:53:19,080 --> 00:53:22,550 And so immutability is this concept by which, 868 00:53:22,550 --> 00:53:26,790 if we're given some sort of object for-- or if we're giving some sort of value, 869 00:53:26,790 --> 00:53:30,274 that value is guaranteed to not be mutated. 870 00:53:30,274 --> 00:53:32,690 And if we want to change that value, what we have to do is 871 00:53:32,690 --> 00:53:37,430 we actually have to create a new value that's very similar, 872 00:53:37,430 --> 00:53:41,480 but we change what we wanted to change there. 873 00:53:41,480 --> 00:53:45,620 And so in this example, rather than using the same array 874 00:53:45,620 --> 00:53:53,650 and sorting within that array, we actually want to create a new array. 875 00:53:53,650 --> 00:53:59,670 And so again, there's a quick way to do this 876 00:53:59,670 --> 00:54:03,330 by using that dot, dot, dot notation. 877 00:54:03,330 --> 00:54:07,454 So if we create a new array literal, so just two brackets, 878 00:54:07,454 --> 00:54:08,620 that's creating a new array. 879 00:54:08,620 --> 00:54:12,410 So that took care of the create new array part. 880 00:54:12,410 --> 00:54:15,920 And if we do dot, dot, dot preState dot contacts, that says, 881 00:54:15,920 --> 00:54:19,160 all right for every single value in preState dot contacts, 882 00:54:19,160 --> 00:54:23,130 clone that into a new array. 883 00:54:23,130 --> 00:54:26,820 And so to be very explicit, for each of the values and contacts, 884 00:54:26,820 --> 00:54:28,830 those objects have not changed at all. 885 00:54:28,830 --> 00:54:33,210 They're still the exact same objects, exact same object references, 886 00:54:33,210 --> 00:54:34,860 but they're put in a brand new array. 887 00:54:34,860 --> 00:54:38,850 And so when we pass this new array down, it's a brand new array 888 00:54:38,850 --> 00:54:40,410 and it will rerender. 889 00:54:40,410 --> 00:54:43,500 And of course, if we do dot sort on this new array, 890 00:54:43,500 --> 00:54:47,220 since that FlatList hasn't seen this new array before, 891 00:54:47,220 --> 00:54:50,350 it will go ahead and rerender. 892 00:54:50,350 --> 00:54:55,270 So now, if we save this, show our contacts and sort, 893 00:54:55,270 --> 00:54:56,360 it goes ahead and works. 894 00:54:56,360 --> 00:55:00,050 895 00:55:00,050 --> 00:55:07,310 So any question on FlatList or virtualized or scrolling list 896 00:55:07,310 --> 00:55:08,510 that we've seen thus far? 897 00:55:08,510 --> 00:55:11,468 898 00:55:11,468 --> 00:55:12,947 Yeah? 899 00:55:12,947 --> 00:55:26,237 AUDIENCE: [INAUDIBLE] 900 00:55:26,237 --> 00:55:27,320 SPEAKER 1: Can you repeat? 901 00:55:27,320 --> 00:55:30,104 902 00:55:30,104 --> 00:55:31,270 Can you repeat the question? 903 00:55:31,270 --> 00:55:32,228 I missed the last part. 904 00:55:32,228 --> 00:55:34,650 905 00:55:34,650 --> 00:55:44,800 AUDIENCE: [INAUDIBLE] 906 00:55:44,800 --> 00:55:46,150 SPEAKER 1: Right. 907 00:55:46,150 --> 00:55:48,820 So the question was, for renderItem. 908 00:55:48,820 --> 00:55:50,720 It takes as an argument the object. 909 00:55:50,720 --> 00:55:52,580 And what exactly is this object? 910 00:55:52,580 --> 00:55:57,250 Well, we can actually just look at the docs and it tells us. 911 00:55:57,250 --> 00:56:06,000 So in the docs if we look for a renderItem, 912 00:56:06,000 --> 00:56:09,183 it tells us exactly what has passed as arguments to renderItem. 913 00:56:09,183 --> 00:56:13,920 914 00:56:13,920 --> 00:56:16,490 And so as you see here, renderItem is invoked 915 00:56:16,490 --> 00:56:19,124 with the item, which is an object, as well 916 00:56:19,124 --> 00:56:22,290 as a few different things like index, separators, which we don't care about. 917 00:56:22,290 --> 00:56:24,570 We really only care about the item. 918 00:56:24,570 --> 00:56:26,720 And so since I read the doc page, I know that one 919 00:56:26,720 --> 00:56:31,554 of the keys that is passed to renderItem in the object is called, item. 920 00:56:31,554 --> 00:56:33,542 Does that answer your question? 921 00:56:33,542 --> 00:56:36,530 922 00:56:36,530 --> 00:56:41,030 So the reason that I have object here, an object to item, 923 00:56:41,030 --> 00:56:45,290 is because I know that the object passed to renderItem 924 00:56:45,290 --> 00:56:50,660 has a key called, item, which refers to the item in that data. 925 00:56:50,660 --> 00:56:55,460 AUDIENCE: [INAUDIBLE] 926 00:56:55,460 --> 00:56:58,884 SPEAKER 1: So FlatList takes care of passing the object for you 927 00:56:58,884 --> 00:57:00,800 and creating the object and doing all of that. 928 00:57:00,800 --> 00:57:04,790 Really, all we care about is the fact that we have the item passed here. 929 00:57:04,790 --> 00:57:08,240 And actually, there's shorthand for that as well. 930 00:57:08,240 --> 00:57:15,407 Rather than passing this object, we really only care about the item. 931 00:57:15,407 --> 00:57:21,220 932 00:57:21,220 --> 00:57:26,650 So just like their shorthand for a lot of things, so the analogous-- 933 00:57:26,650 --> 00:57:32,020 so when we wanted to create an object, if we have a variable called, item, 934 00:57:32,020 --> 00:57:34,810 and we want to create an object with a key called, 935 00:57:34,810 --> 00:57:38,930 item where the value is item, all we had to do is this. 936 00:57:38,930 --> 00:57:40,430 You can actually do that in reverse. 937 00:57:40,430 --> 00:57:45,130 Say we're past an object with a bunch of keys and we only care about one called, 938 00:57:45,130 --> 00:57:46,090 item. 939 00:57:46,090 --> 00:57:49,660 We can actually use the syntax, which will create a new variable called, 940 00:57:49,660 --> 00:57:53,540 item, and extract that key for you. 941 00:57:53,540 --> 00:57:57,250 So another shorthand that we see is rather than being passed an object 942 00:57:57,250 --> 00:58:00,640 and only using object dot item here, we can actually-- what's called 943 00:58:00,640 --> 00:58:02,800 destructure that object. 944 00:58:02,800 --> 00:58:04,940 Pull that item and use that there. 945 00:58:04,940 --> 00:58:08,710 And again, the only reason that I know that this key called, item, exists 946 00:58:08,710 --> 00:58:10,780 is because the documentation for FlatList 947 00:58:10,780 --> 00:58:15,070 told me hey, we're going to create this object for you, pass down this item, 948 00:58:15,070 --> 00:58:16,570 and you just can use the item there. 949 00:58:16,570 --> 00:58:18,400 And so that's all abstracted away from us. 950 00:58:18,400 --> 00:58:20,230 We don't really care about anything else. 951 00:58:20,230 --> 00:58:25,765 We just care that the item that's passed down is called, item in this object. 952 00:58:25,765 --> 00:58:26,265 Yeah? 953 00:58:26,265 --> 00:58:32,210 AUDIENCE: [INAUDIBLE] 954 00:58:32,210 --> 00:58:35,147 SPEAKER 1: So the question is-- 955 00:58:35,147 --> 00:58:35,980 so I'll just answer. 956 00:58:35,980 --> 00:58:42,910 So the data is in an array of arbitrary things and each item that is rendered 957 00:58:42,910 --> 00:58:47,200 takes one of those values, puts it in a key called, item, 958 00:58:47,200 --> 00:58:51,710 and passes it to whatever the renderItem function is. 959 00:58:51,710 --> 00:58:54,430 And so we defined it such that it passes-- 960 00:58:54,430 --> 00:59:01,320 it takes an object with an item key, and passes that into our row component. 961 00:59:01,320 --> 00:59:10,089 AUDIENCE: [INAUDIBLE] 962 00:59:10,089 --> 00:59:12,130 SPEAKER 1: So what is item here, is the question. 963 00:59:12,130 --> 00:59:23,590 And so item here is an object in the shape of name and phone, 964 00:59:23,590 --> 00:59:31,710 where name is of type string and phone is also of type string. 965 00:59:31,710 --> 00:59:36,490 And I know this because I know that each of the data points inside of data 966 00:59:36,490 --> 00:59:39,580 is of the same shape. 967 00:59:39,580 --> 00:59:40,240 So if we open-- 968 00:59:40,240 --> 00:59:53,570 969 00:59:53,570 --> 00:59:58,590 so up here in contacts.js, when we created that array, 970 00:59:58,590 --> 01:00:03,030 it's an array of contacts where each contact is a name and a phone number. 971 01:00:03,030 --> 01:00:08,580 And so that array is passed into here when we import it in. 972 01:00:08,580 --> 01:00:15,430 And then that array is the same data that we're passing to FlatList. 973 01:00:15,430 --> 01:00:18,660 And so this dot state dot contacts is what 974 01:00:18,660 --> 01:00:23,070 we exported from here, which is an array of names and phone numbers. 975 01:00:23,070 --> 01:00:25,890 And so what FlatList is doing for is it's automatically 976 01:00:25,890 --> 01:00:26,890 taking all of that data. 977 01:00:26,890 --> 01:00:32,760 So the data is a bunch of objects of the shape, and it's lazily, 978 01:00:32,760 --> 01:00:35,190 and when I say lazily, it means only when it's in view, 979 01:00:35,190 --> 01:00:38,460 rendering each row or each item. 980 01:00:38,460 --> 01:00:42,442 And so for each item it needs to know exactly how to render it. 981 01:00:42,442 --> 01:00:44,400 And so what we're passing is a function called, 982 01:00:44,400 --> 01:00:48,447 renderItem where the renderItem takes a bunch of configuration, one of which 983 01:00:48,447 --> 01:00:51,030 is the item itself, because it needs that information in order 984 01:00:51,030 --> 01:00:57,600 to know what to render, and then passes that into whatever we want. 985 01:00:57,600 --> 01:01:05,860 And so we declared up here, that when we want to render an item, 986 01:01:05,860 --> 01:01:10,750 we take whatever information is, so the value of the array itself, 987 01:01:10,750 --> 01:01:13,830 and just pass those into the component that we called row. 988 01:01:13,830 --> 01:01:16,540 989 01:01:16,540 --> 01:01:18,260 Does that makes sense? 990 01:01:18,260 --> 01:01:24,804 AUDIENCE: [INAUDIBLE] 991 01:01:24,804 --> 01:01:25,470 SPEAKER 1: Here? 992 01:01:25,470 --> 01:01:26,670 AUDIENCE: Yeah. 993 01:01:26,670 --> 01:01:29,460 SPEAKER 1: That's just that special notation. 994 01:01:29,460 --> 01:01:30,679 So we can ignore that. 995 01:01:30,679 --> 01:01:38,670 996 01:01:38,670 --> 01:01:40,980 So that's the same as this, which is the same as this. 997 01:01:40,980 --> 01:01:59,650 998 01:01:59,650 --> 01:02:03,340 So that was just a bunch of shorthand for this. 999 01:02:03,340 --> 01:02:05,220 So we know that we're passing an object. 1000 01:02:05,220 --> 01:02:10,020 We know that the item that we pulled out of data is object to item. 1001 01:02:10,020 --> 01:02:14,890 And we know that item has two keys, name and phone. 1002 01:02:14,890 --> 01:02:16,785 And so we can just say name is object to item 1003 01:02:16,785 --> 01:02:20,870 dot name and phone is object to item dot phone. 1004 01:02:20,870 --> 01:02:25,470 And if you're reading source code from any libraries that you see, 1005 01:02:25,470 --> 01:02:28,950 most people will use all of JavaScript shorthand, which 1006 01:02:28,950 --> 01:02:36,420 include pulling out item automatically by using less shorthand there, 1007 01:02:36,420 --> 01:02:38,550 and using all the key value pairs automatically 1008 01:02:38,550 --> 01:02:40,675 by doing that dot, dot, dot destructuring notation. 1009 01:02:40,675 --> 01:02:42,812 1010 01:02:42,812 --> 01:02:44,520 But this effectively does the same thing. 1011 01:02:44,520 --> 01:02:47,999 1012 01:02:47,999 --> 01:02:49,490 Does that make sense? 1013 01:02:49,490 --> 01:02:52,761 1014 01:02:52,761 --> 01:02:53,260 Great. 1015 01:02:53,260 --> 01:02:55,135 Let's take a five minute break and then we'll 1016 01:02:55,135 --> 01:02:59,500 go ahead and look at this and other lists after the break. 1017 01:02:59,500 --> 01:03:00,760 Hello, and welcome back. 1018 01:03:00,760 --> 01:03:05,730 So before the break we were talking about the lists and the list components 1019 01:03:05,730 --> 01:03:07,300 React Native gives us. 1020 01:03:07,300 --> 01:03:09,310 I mean, we showed an example for FlatList, 1021 01:03:09,310 --> 01:03:15,640 and one question that came up in Slack, was how come the warning for keys 1022 01:03:15,640 --> 01:03:17,770 was not popping up even though we were not 1023 01:03:17,770 --> 01:03:21,622 being explicit about the keys in the example here. 1024 01:03:21,622 --> 01:03:24,580 And so one thing I left out when I was talking about the shape of items 1025 01:03:24,580 --> 01:03:27,610 here was that key exists, which was number. 1026 01:03:27,610 --> 01:03:31,620 1027 01:03:31,620 --> 01:03:34,050 And if you look at the FlatList docs, it actually 1028 01:03:34,050 --> 01:03:37,310 automatically extracts the keys for you. 1029 01:03:37,310 --> 01:03:41,430 And so if you have a key value in the objects 1030 01:03:41,430 --> 01:03:46,330 that you're passing in that data array, then it will use those for the keys. 1031 01:03:46,330 --> 01:03:49,170 And if you want to use something other than a key property, 1032 01:03:49,170 --> 01:03:52,500 then you can pass this thing called a key extractor, 1033 01:03:52,500 --> 01:03:55,500 which is a function to FlatList. 1034 01:03:55,500 --> 01:04:01,600 But for our example, since each item had a key, 1035 01:04:01,600 --> 01:04:06,240 then it worked and automatically extracted that key for us. 1036 01:04:06,240 --> 01:04:08,589 So a great question from Slack. 1037 01:04:08,589 --> 01:04:14,460 1038 01:04:14,460 --> 01:04:18,460 So another scrolling component is actually called a SectionList. 1039 01:04:18,460 --> 01:04:23,510 And so if you open up your actual contacts on a phone, 1040 01:04:23,510 --> 01:04:25,855 it will actually give you sections with section headers. 1041 01:04:25,855 --> 01:04:28,370 1042 01:04:28,370 --> 01:04:31,000 And so this component is exactly like a FlatList, 1043 01:04:31,000 --> 01:04:33,370 but we have additional support that will automatically 1044 01:04:33,370 --> 01:04:36,690 use those section headers for us. 1045 01:04:36,690 --> 01:04:40,840 And so instead of a data prop, we actually just define sections. 1046 01:04:40,840 --> 01:04:42,400 What do those sections look like? 1047 01:04:42,400 --> 01:04:45,550 Well, each section has its own data array. 1048 01:04:45,550 --> 01:04:50,380 So unlike in FlatList where we had array called data, 1049 01:04:50,380 --> 01:04:53,950 we now have an array called sections where each section is 1050 01:04:53,950 --> 01:04:57,410 an object with its own data array. 1051 01:04:57,410 --> 01:05:02,139 And each section has the opportunity to override the render item function 1052 01:05:02,139 --> 01:05:03,430 with their own custom renderer. 1053 01:05:03,430 --> 01:05:10,150 Say if you wanted to have different colors or different backgrounds 1054 01:05:10,150 --> 01:05:13,900 for each section, you could do that by overriding the render item function. 1055 01:05:13,900 --> 01:05:18,030 1056 01:05:18,030 --> 01:05:20,790 And for section headers we just pass a separate renderer. 1057 01:05:20,790 --> 01:05:25,440 So just like we defined a renderer for the items, 1058 01:05:25,440 --> 01:05:29,259 we just also define a renderer for section headers. 1059 01:05:29,259 --> 01:05:31,300 And so let's take a look at what that looks like. 1060 01:05:31,300 --> 01:05:35,560 1061 01:05:35,560 --> 01:05:47,960 So if we replace FlatList with SectionList and we passed-- 1062 01:05:47,960 --> 01:05:52,820 rather than data, we pass sections where sections is actually 1063 01:05:52,820 --> 01:05:57,290 an array of sections. 1064 01:05:57,290 --> 01:06:06,820 In this example, lets just hard code those sections where one of the data 1065 01:06:06,820 --> 01:06:09,140 is, this dot state dot contacts. 1066 01:06:09,140 --> 01:06:12,424 And let's say the title or something. 1067 01:06:12,424 --> 01:06:13,840 We can call this whatever we want. 1068 01:06:13,840 --> 01:06:19,450 Let's just call it A. 1069 01:06:19,450 --> 01:06:21,770 So we're passing it a render item, which tells it 1070 01:06:21,770 --> 01:06:23,880 how to render a particular item. 1071 01:06:23,880 --> 01:06:27,680 We're passing the sections, which each section has its own data. 1072 01:06:27,680 --> 01:06:29,690 I mean, each section has its own title. 1073 01:06:29,690 --> 01:06:32,989 We're not telling the section list exactly how to render those sections. 1074 01:06:32,989 --> 01:06:34,280 And let's go ahead and do that. 1075 01:06:34,280 --> 01:06:37,910 So let's do render section header, it's called. 1076 01:06:37,910 --> 01:06:43,040 1077 01:06:43,040 --> 01:06:47,537 Let's do render section header. 1078 01:06:47,537 --> 01:06:49,370 So now, we have to go ahead and define that. 1079 01:06:49,370 --> 01:07:00,450 1080 01:07:00,450 --> 01:07:04,150 And let me check my notes to see exactly what that object looks like. 1081 01:07:04,150 --> 01:07:07,270 1082 01:07:07,270 --> 01:07:12,170 So just like we have an object here, we're passing an object down. 1083 01:07:12,170 --> 01:07:14,830 And just like this object in the renderItem, 1084 01:07:14,830 --> 01:07:16,580 has this thing called an item. 1085 01:07:16,580 --> 01:07:28,150 This thing called intersection header has a section. 1086 01:07:28,150 --> 01:07:34,060 So let's just pass it text and do ob dot section dot title. 1087 01:07:34,060 --> 01:07:37,500 1088 01:07:37,500 --> 01:07:42,930 And again, the only reason that I know this object dot section key exists 1089 01:07:42,930 --> 01:07:46,620 is because I looked up the docs and wrote it down. 1090 01:07:46,620 --> 01:07:50,520 And so I know-- so just like this object has this thing called object dot 1091 01:07:50,520 --> 01:07:54,400 item, which refers to the item itself in the data, 1092 01:07:54,400 --> 01:07:58,590 this object has object dot section, which refers to the section 1093 01:07:58,590 --> 01:08:04,410 that we're passing down here. 1094 01:08:04,410 --> 01:08:07,980 So refer to this object here. 1095 01:08:07,980 --> 01:08:10,512 And so since the object has a key called, title, 1096 01:08:10,512 --> 01:08:11,970 we can go ahead and use it in here. 1097 01:08:11,970 --> 01:08:14,650 1098 01:08:14,650 --> 01:08:17,950 And so now, that is more or less complete for SectionList. 1099 01:08:17,950 --> 01:08:21,160 We give it a way to render each item. 1100 01:08:21,160 --> 01:08:25,560 We give it a way to render each header and we tell it what the sections are. 1101 01:08:25,560 --> 01:08:28,470 And so in this example, we have a single section 1102 01:08:28,470 --> 01:08:35,189 that's an object with a title called A, and data being all of our contacts. 1103 01:08:35,189 --> 01:08:38,870 And so if we go ahead and show that-- 1104 01:08:38,870 --> 01:08:39,540 save it. 1105 01:08:39,540 --> 01:08:43,000 1106 01:08:43,000 --> 01:08:46,131 And there is a syntax error somewhere. 1107 01:08:46,131 --> 01:08:46,630 Here. 1108 01:08:46,630 --> 01:08:49,580 1109 01:08:49,580 --> 01:08:57,810 If you go ahead and run that, we can see that we have a section header here. 1110 01:08:57,810 --> 01:09:04,260 Just the A, and then following it are all of our contacts. 1111 01:09:04,260 --> 01:09:08,510 And again, this is another one of those virtualized lists where it lazy loads. 1112 01:09:08,510 --> 01:09:10,620 And so if we toggle it, it immediately loads 1113 01:09:10,620 --> 01:09:12,540 even though there are 10,000 of them. 1114 01:09:12,540 --> 01:09:17,640 Just because it's only again, rendering what we see on the screen. 1115 01:09:17,640 --> 01:09:19,893 And as you see here, that A is that section title. 1116 01:09:19,893 --> 01:09:23,140 1117 01:09:23,140 --> 01:09:25,270 And so let's actually improve this a bit. 1118 01:09:25,270 --> 01:09:28,120 And so right now, we have hard-coded the fact 1119 01:09:28,120 --> 01:09:32,810 that we have a section called A with all of our friends down here. 1120 01:09:32,810 --> 01:09:34,870 But what if we actually wrote a function that 1121 01:09:34,870 --> 01:09:39,279 figured out people's appropriate sections. 1122 01:09:39,279 --> 01:09:42,370 And so everybody whose name starts with an A should be in the A section. 1123 01:09:42,370 --> 01:09:45,740 Everybody whose name starts with a B should be in the B section, and so on. 1124 01:09:45,740 --> 01:09:48,620 And so let's go ahead and write a function that does that. 1125 01:09:48,620 --> 01:09:53,066 1126 01:09:53,066 --> 01:09:55,962 So how might we do that? 1127 01:09:55,962 --> 01:09:57,920 So first, let's clean up our code a little bit. 1128 01:09:57,920 --> 01:10:01,760 Right now, we have this section list down here, 1129 01:10:01,760 --> 01:10:04,280 but this is another example of a time where we can 1130 01:10:04,280 --> 01:10:07,321 abstract another component out of this. 1131 01:10:07,321 --> 01:10:09,695 And so let's create this thing called, our contacts list. 1132 01:10:09,695 --> 01:10:15,130 1133 01:10:15,130 --> 01:10:17,830 And into that, let's just cut and paste this section list. 1134 01:10:17,830 --> 01:10:25,340 1135 01:10:25,340 --> 01:10:28,350 Let's just save this for now, so we have some room. 1136 01:10:28,350 --> 01:10:33,950 And so here, let's create this thing called, a contacts list, 1137 01:10:33,950 --> 01:10:39,040 which is a stateless functional component, so it takes some props, 1138 01:10:39,040 --> 01:10:41,030 and it will return this. 1139 01:10:41,030 --> 01:10:45,800 1140 01:10:45,800 --> 01:10:47,630 But before that, let's do some things. 1141 01:10:47,630 --> 01:10:50,820 1142 01:10:50,820 --> 01:10:52,660 Actually, first let's complete this example. 1143 01:10:52,660 --> 01:11:01,170 So first we need to import React, and we need to import SectionList. 1144 01:11:01,170 --> 01:11:10,980 1145 01:11:10,980 --> 01:11:17,390 And lastly, we need to export this because without exporting it, 1146 01:11:17,390 --> 01:11:21,462 we can't import it into our main application. 1147 01:11:21,462 --> 01:11:25,800 1148 01:11:25,800 --> 01:11:32,100 And so let's call this, props dot render item, props dot render section header, 1149 01:11:32,100 --> 01:11:33,060 and props dot contacts. 1150 01:11:33,060 --> 01:11:38,800 1151 01:11:38,800 --> 01:11:41,119 And so now, we have three props that are passing down, 1152 01:11:41,119 --> 01:11:43,410 so it might start to get a little bit difficult to keep 1153 01:11:43,410 --> 01:11:45,059 track of all these props. 1154 01:11:45,059 --> 01:11:47,100 Does anybody remember something that we discussed 1155 01:11:47,100 --> 01:11:48,850 in a previous lecture, which will actually 1156 01:11:48,850 --> 01:11:51,243 self document all of our props for us? 1157 01:11:51,243 --> 01:11:54,190 1158 01:11:54,190 --> 01:11:57,230 There's that package called PropTypes. 1159 01:11:57,230 --> 01:12:07,030 And so if we import PropTypes from PropTypes, 1160 01:12:07,030 --> 01:12:10,390 this is that package allows us to self document things. 1161 01:12:10,390 --> 01:12:12,920 So if we forget to pass down a prop or we 1162 01:12:12,920 --> 01:12:16,100 don't remember what a prop should look like, like what data type is it, 1163 01:12:16,100 --> 01:12:19,520 we can actually use PropTypes to one, check at runtime 1164 01:12:19,520 --> 01:12:21,515 are we passing the correct props, and two, 1165 01:12:21,515 --> 01:12:24,590 to just document for us so that when we open a new file, we know, 1166 01:12:24,590 --> 01:12:29,480 oh, we should be passing this component, these particular props. 1167 01:12:29,480 --> 01:12:33,080 So again, the way to do that is by adding this key to contacts 1168 01:12:33,080 --> 01:12:40,760 list called PropTypes and defining an object with those key value pairs. 1169 01:12:40,760 --> 01:12:45,290 And so we're expecting something called a renderItem, 1170 01:12:45,290 --> 01:12:46,445 which should be a function. 1171 01:12:46,445 --> 01:12:51,340 1172 01:12:51,340 --> 01:12:55,845 We're passing down render section header, 1173 01:12:55,845 --> 01:12:57,220 which again should be a function. 1174 01:12:57,220 --> 01:13:00,380 1175 01:13:00,380 --> 01:13:06,350 And we're passing down some contacts, which is an array. 1176 01:13:06,350 --> 01:13:10,463 1177 01:13:10,463 --> 01:13:14,940 And so now React will tell us if we're passing down the wrong props. 1178 01:13:14,940 --> 01:13:19,010 And so let's go ahead and use this contacts list in our application. 1179 01:13:19,010 --> 01:13:21,710 1180 01:13:21,710 --> 01:13:27,340 So here we want to import prop ContactsList. 1181 01:13:27,340 --> 01:13:32,490 1182 01:13:32,490 --> 01:13:33,270 ContactsList. 1183 01:13:33,270 --> 01:13:37,459 1184 01:13:37,459 --> 01:13:39,250 And down here, let's go ahead and use that. 1185 01:13:39,250 --> 01:13:44,180 1186 01:13:44,180 --> 01:13:45,700 And what props are we passing down? 1187 01:13:45,700 --> 01:13:48,700 We're passing down to render section header and renderItem. 1188 01:13:48,700 --> 01:13:53,790 1189 01:13:53,790 --> 01:13:56,170 We're passing down render section header. 1190 01:13:56,170 --> 01:14:02,800 1191 01:14:02,800 --> 01:14:06,480 And finally, we're passing down contacts. 1192 01:14:06,480 --> 01:14:11,448 And just for fun, let's actually pass down an object for that. 1193 01:14:11,448 --> 01:14:19,430 1194 01:14:19,430 --> 01:14:22,220 And so we'll see if we pass down an object, one, 1195 01:14:22,220 --> 01:14:25,360 everything is not going to work, and two, it's telling us, 1196 01:14:25,360 --> 01:14:26,910 hey, failed prop type. 1197 01:14:26,910 --> 01:14:30,420 We expected contacts to have type object. 1198 01:14:30,420 --> 01:14:36,140 Or we passed contacts of type object when we're actually expecting an array. 1199 01:14:36,140 --> 01:14:40,520 1200 01:14:40,520 --> 01:14:44,280 And so again, prop types as we showed last lecture, is just a way for us 1201 01:14:44,280 --> 01:14:45,660 to catch bugs. 1202 01:14:45,660 --> 01:14:48,527 So if we're passing down something that we think is of one type 1203 01:14:48,527 --> 01:14:51,360 and is actually of a different type, it will catch those bugs for us 1204 01:14:51,360 --> 01:14:53,910 and tell us, hey, we're expecting array here. 1205 01:14:53,910 --> 01:15:00,555 And so for contact's, we should actually be passing down the contacts. 1206 01:15:00,555 --> 01:15:05,700 1207 01:15:05,700 --> 01:15:08,250 And so now, we are back to where we were before. 1208 01:15:08,250 --> 01:15:11,370 1209 01:15:11,370 --> 01:15:15,025 There's one thing that I think is a little bit strange about this example. 1210 01:15:15,025 --> 01:15:17,860 1211 01:15:17,860 --> 01:15:21,660 So does the application really care what renderItem is? 1212 01:15:21,660 --> 01:15:26,260 Does the application really care what render section is? 1213 01:15:26,260 --> 01:15:29,470 In a way, yes, but where should that really be defined? 1214 01:15:29,470 --> 01:15:31,750 What component actually really cares about renderItem 1215 01:15:31,750 --> 01:15:34,769 in render section header? 1216 01:15:34,769 --> 01:15:36,310 It really is the ContactsList, right? 1217 01:15:36,310 --> 01:15:40,690 Because the application doesn't really have anything to 1218 01:15:40,690 --> 01:15:43,450 do with the logic in app.js. 1219 01:15:43,450 --> 01:15:44,950 And same with render section header. 1220 01:15:44,950 --> 01:15:47,890 The fact that render section header is just some text 1221 01:15:47,890 --> 01:15:51,570 doesn't have anything to do with the other logic it has on js. 1222 01:15:51,570 --> 01:15:54,965 And so what might be a better place to implement this logic? 1223 01:15:54,965 --> 01:16:00,464 1224 01:16:00,464 --> 01:16:01,630 AUDIENCE: In the other file. 1225 01:16:01,630 --> 01:16:03,713 SPEAKER 1: Yeah, in the file called, ContactsList. 1226 01:16:03,713 --> 01:16:05,566 And why might we want to do that? 1227 01:16:05,566 --> 01:16:09,440 1228 01:16:09,440 --> 01:16:11,860 So imagine down the line we're saying-- 1229 01:16:11,860 --> 01:16:15,910 so imagine down the line we have a very, very complex app with contacts 1230 01:16:15,910 --> 01:16:16,890 and everything. 1231 01:16:16,890 --> 01:16:19,990 And say we were saying, oh, this is a cool contacts list, 1232 01:16:19,990 --> 01:16:22,240 but I think the rows a little bit ugly. 1233 01:16:22,240 --> 01:16:23,904 Let me go change that. 1234 01:16:23,904 --> 01:16:25,820 And say it wasn't you, say it was a friend who 1235 01:16:25,820 --> 01:16:27,190 is helping you on this project. 1236 01:16:27,190 --> 01:16:31,690 Where are they going to turn to for changing that? 1237 01:16:31,690 --> 01:16:35,500 They're probably going to look at the component that renders it, right? 1238 01:16:35,500 --> 01:16:40,150 And so by having the renderItem, which is arguably something 1239 01:16:40,150 --> 01:16:42,760 that the ContactsList is solely responsible for. 1240 01:16:42,760 --> 01:16:47,050 Having that logic inapt on js is going to lead some problems down the road, 1241 01:16:47,050 --> 01:16:53,395 for one, maintainability, two, readability, and three, scalability. 1242 01:16:53,395 --> 01:16:55,270 And so all of this just goes down to the fact 1243 01:16:55,270 --> 01:16:59,960 that renderItem is really something that contacts cares about and not app.js. 1244 01:16:59,960 --> 01:17:02,240 And so how might we go about solving that problem? 1245 01:17:02,240 --> 01:17:04,230 Well, we can just move that to the other file. 1246 01:17:04,230 --> 01:17:09,090 1247 01:17:09,090 --> 01:17:17,144 So let's take those, cut and paste that here. 1248 01:17:17,144 --> 01:17:22,960 1249 01:17:22,960 --> 01:17:26,606 So what we did is we removed those two functions. 1250 01:17:26,606 --> 01:17:28,480 We can remove the render section header here. 1251 01:17:28,480 --> 01:17:30,109 We can remove rendorItem here. 1252 01:17:30,109 --> 01:17:34,850 1253 01:17:34,850 --> 01:17:42,980 And now, all we're doing is we're passing ContactsList 1254 01:17:42,980 --> 01:17:52,560 the contacts, which makes sense, right? 1255 01:17:52,560 --> 01:17:57,270 What should ContactsList need to render? 1256 01:17:57,270 --> 01:17:59,400 Just a list of contacts, and that makes sense. 1257 01:17:59,400 --> 01:18:02,940 So it's API is saying, hey, I can render ContactsList, 1258 01:18:02,940 --> 01:18:05,250 all you have to do is pass me the contacts. 1259 01:18:05,250 --> 01:18:09,960 And so by removing the logic that's not unique or not necessarily cared 1260 01:18:09,960 --> 01:18:13,770 about inside of app.js, outside of app.js, 1261 01:18:13,770 --> 01:18:16,650 it now makes more sense in like a mental model. 1262 01:18:16,650 --> 01:18:19,800 So everything that's needed for ContactsList to render 1263 01:18:19,800 --> 01:18:22,369 should be implemented in ContactsList. 1264 01:18:22,369 --> 01:18:28,357 1265 01:18:28,357 --> 01:18:30,353 And so now, let's finish this. 1266 01:18:30,353 --> 01:18:44,737 1267 01:18:44,737 --> 01:18:46,570 So now, we just created those two functions. 1268 01:18:46,570 --> 01:18:49,770 So we have a function called, a renderItem, 1269 01:18:49,770 --> 01:18:51,480 and it is the same as it is before. 1270 01:18:51,480 --> 01:18:54,340 It's an object that returns a row. 1271 01:18:54,340 --> 01:18:57,330 And of course, we had to import row. 1272 01:18:57,330 --> 01:19:00,422 And then we have a cons called render section header, 1273 01:19:00,422 --> 01:19:01,880 which is the same as it was before. 1274 01:19:01,880 --> 01:19:05,310 It's an object, which returned some text. 1275 01:19:05,310 --> 01:19:08,160 And of course, we had to import in text. 1276 01:19:08,160 --> 01:19:10,110 And so now, we can just go pass that in there 1277 01:19:10,110 --> 01:19:13,001 rather than looking for its props. 1278 01:19:13,001 --> 01:19:25,040 1279 01:19:25,040 --> 01:19:30,520 And now, if we save that, again, we're in the same place in terms of UI, 1280 01:19:30,520 --> 01:19:32,090 but our code is much, much neater. 1281 01:19:32,090 --> 01:19:34,610 1282 01:19:34,610 --> 01:19:40,920 If you look at app.js, it's returning something very simple. 1283 01:19:40,920 --> 01:19:43,830 A couple of buttons, which are needed, and a ContactsList, and we're 1284 01:19:43,830 --> 01:19:45,280 passing the contacts. 1285 01:19:45,280 --> 01:19:49,200 And so again, now this bite size piece of application just-- 1286 01:19:49,200 --> 01:19:50,560 this layer here, is very simple. 1287 01:19:50,560 --> 01:19:52,680 We have a view with a couple of buttons. 1288 01:19:52,680 --> 01:19:55,540 We take care of those buttons logic in here. 1289 01:19:55,540 --> 01:19:59,190 And then we have a separate component called, ContactsList, 1290 01:19:59,190 --> 01:20:01,732 and we pass the list of contacts. 1291 01:20:01,732 --> 01:20:06,010 And so this is a very simple way of stating our app. 1292 01:20:06,010 --> 01:20:09,660 And if we want to get into the implementation details of ContactsList, 1293 01:20:09,660 --> 01:20:14,310 we can just look at the ContactsList component. 1294 01:20:14,310 --> 01:20:20,010 And in here, we have the logic necessary for ContactsList. 1295 01:20:20,010 --> 01:20:24,150 We're defining what it looks like to render a single item. 1296 01:20:24,150 --> 01:20:26,940 We're also telling the SectionList exactly how we 1297 01:20:26,940 --> 01:20:29,790 should be rendering a section header. 1298 01:20:29,790 --> 01:20:35,770 And of course, we're just looking to our props for the contacts themselves. 1299 01:20:35,770 --> 01:20:38,214 But then, what the heck is a row? 1300 01:20:38,214 --> 01:20:41,130 And so again, that's another bite size small piece of our application. 1301 01:20:41,130 --> 01:20:44,580 So if you want to look at the exact way a row is implemented, 1302 01:20:44,580 --> 01:20:47,400 then you can just look at the row file. 1303 01:20:47,400 --> 01:20:50,220 And here, is another simple problem that we've solved. 1304 01:20:50,220 --> 01:20:55,311 So a row is just a view that tells us some name and a phone number. 1305 01:20:55,311 --> 01:20:57,810 And of course, styles it a little bit by adding some padding 1306 01:20:57,810 --> 01:21:00,160 so everything's not squished together. 1307 01:21:00,160 --> 01:21:02,790 And so what is turning into a more complex app is actually, 1308 01:21:02,790 --> 01:21:04,530 just a few different simple files. 1309 01:21:04,530 --> 01:21:09,870 And so as you work on your next project or personal projects in the future, 1310 01:21:09,870 --> 01:21:13,200 you can start to use these paradigms where you have a big complex problem, 1311 01:21:13,200 --> 01:21:15,404 and break it down into smaller components 1312 01:21:15,404 --> 01:21:17,070 such that each one is very maintainable. 1313 01:21:17,070 --> 01:21:18,355 Each one is very readable. 1314 01:21:18,355 --> 01:21:20,730 And so if you want friends to work on that with you, it's 1315 01:21:20,730 --> 01:21:24,672 very easy to tell them oh, if you want to change this part of the application, 1316 01:21:24,672 --> 01:21:26,130 just look for that particular file. 1317 01:21:26,130 --> 01:21:34,210 1318 01:21:34,210 --> 01:21:37,550 And so now, let's actually tackle that hard logical problem where 1319 01:21:37,550 --> 01:21:42,770 we have an array of contacts and we want to split that into a bunch of sections 1320 01:21:42,770 --> 01:21:44,075 where each section has-- 1321 01:21:44,075 --> 01:21:47,150 1322 01:21:47,150 --> 01:21:52,841 the section header is defined by the first name of the contacts. 1323 01:21:52,841 --> 01:21:53,840 So how might we do that? 1324 01:21:53,840 --> 01:21:58,860 1325 01:21:58,860 --> 01:22:02,200 Well, first we're going to have some logic 1326 01:22:02,200 --> 01:22:05,000 that we're going to want to do before we return the section list. 1327 01:22:05,000 --> 01:22:08,310 1328 01:22:08,310 --> 01:22:15,710 As a first, we might want to say, take props dot contacts 1329 01:22:15,710 --> 01:22:19,010 and split that up into that-- 1330 01:22:19,010 --> 01:22:21,770 the shape where we have an array of objects 1331 01:22:21,770 --> 01:22:27,500 separated where the title is again, the first letter 1332 01:22:27,500 --> 01:22:31,400 of every single contact in its data. 1333 01:22:31,400 --> 01:22:33,930 Can anybody think of a good algorithm to do that? 1334 01:22:33,930 --> 01:22:41,400 1335 01:22:41,400 --> 01:22:46,160 So the way I would implement it myself, is I would go through the array, 1336 01:22:46,160 --> 01:22:49,160 turn that into an object where the keys in the object 1337 01:22:49,160 --> 01:22:52,950 are the first letter of the values in that. 1338 01:22:52,950 --> 01:22:57,140 And then go from that shape, whereas an object, where 1339 01:22:57,140 --> 01:22:59,780 the keys are letters and the value is an array 1340 01:22:59,780 --> 01:23:04,015 of all of the contacts with that letter, and turn that into this shape. 1341 01:23:04,015 --> 01:23:06,140 And so let's go ahead and implement that algorithm. 1342 01:23:06,140 --> 01:23:08,390 And I'll go a little bit quickly for the sake of time. 1343 01:23:08,390 --> 01:23:12,480 1344 01:23:12,480 --> 01:23:18,900 Let's do contacts by letter. 1345 01:23:18,900 --> 01:23:26,190 What that does, is it takes props dot contacts and reduces it, 1346 01:23:26,190 --> 01:23:29,280 where the reduction is taking the objects, which 1347 01:23:29,280 --> 01:23:32,340 is the objects that we eventually want to get to, where it's the keys 1348 01:23:32,340 --> 01:23:36,936 are the letters and the values are an array of all those contacts, 1349 01:23:36,936 --> 01:23:38,185 and it takes the next contact. 1350 01:23:38,185 --> 01:23:45,920 1351 01:23:45,920 --> 01:23:49,030 And we want to of course, start with an empty object. 1352 01:23:49,030 --> 01:23:53,120 And so for each contact, we want to grab it's first letter. 1353 01:23:53,120 --> 01:23:59,480 So we can say, take contact, the very first letter in the string 1354 01:23:59,480 --> 01:24:00,526 and uppercase it. 1355 01:24:00,526 --> 01:24:04,810 1356 01:24:04,810 --> 01:24:06,667 And of course, we want contact dot name. 1357 01:24:06,667 --> 01:24:07,500 So contact dot name. 1358 01:24:07,500 --> 01:24:10,750 So grab its name, look at it's first letter and uppercase it. 1359 01:24:10,750 --> 01:24:14,870 So now, we've extracted the first letter of each contact. 1360 01:24:14,870 --> 01:24:15,550 And then what? 1361 01:24:15,550 --> 01:24:17,890 We want to add that to that object. 1362 01:24:17,890 --> 01:24:22,250 1363 01:24:22,250 --> 01:24:24,850 So we want to return some sort of object where 1364 01:24:24,850 --> 01:24:28,000 it maintains all the previous keys of object 1365 01:24:28,000 --> 01:24:34,360 and appends this particular contact to the key, which 1366 01:24:34,360 --> 01:24:36,696 matches it's first letter. 1367 01:24:36,696 --> 01:24:39,070 So that's a little bit of work to do, and we can actually 1368 01:24:39,070 --> 01:24:40,540 do that all in one line. 1369 01:24:40,540 --> 01:24:43,240 So what have we learned today, which is a quick way 1370 01:24:43,240 --> 01:24:46,450 to clone all of the old keys of an object? 1371 01:24:46,450 --> 01:24:49,290 1372 01:24:49,290 --> 01:24:51,200 We can use that object spread. 1373 01:24:51,200 --> 01:24:54,580 1374 01:24:54,580 --> 01:24:58,630 And so now, all this is doing is just returning the same exact object, 1375 01:24:58,630 --> 01:25:03,650 but in a new immutable object. 1376 01:25:03,650 --> 01:25:06,142 But let's actually add this contact. 1377 01:25:06,142 --> 01:25:09,860 1378 01:25:09,860 --> 01:25:11,630 So you want the key to be first letter. 1379 01:25:11,630 --> 01:25:14,200 1380 01:25:14,200 --> 01:25:19,220 And so you can wrap it in brackets and just like, 1381 01:25:19,220 --> 01:25:22,800 this will evaluate zero to become a string. 1382 01:25:22,800 --> 01:25:26,250 This will evaluate this to become the key. 1383 01:25:26,250 --> 01:25:29,020 And what do we want the value to be? 1384 01:25:29,020 --> 01:25:31,910 Well, it's going to be an array. 1385 01:25:31,910 --> 01:25:35,940 And the array is going to be all of the keys that used to be in that object. 1386 01:25:35,940 --> 01:25:42,390 1387 01:25:42,390 --> 01:25:45,780 And so now, we've again-- 1388 01:25:45,780 --> 01:25:49,660 this actually returns pretty much the same object as before. 1389 01:25:49,660 --> 01:25:53,250 So it's cloning all of the keys in object, 1390 01:25:53,250 --> 01:25:56,350 except it's overriding the one where the key is the first letter that we 1391 01:25:56,350 --> 01:25:58,770 extracted from here. 1392 01:25:58,770 --> 01:26:01,190 And what are we setting to be that as value? 1393 01:26:01,190 --> 01:26:04,440 Well, we're setting a new array and we're 1394 01:26:04,440 --> 01:26:06,720 setting that array equal to basically, everything 1395 01:26:06,720 --> 01:26:09,450 that was already that objects-- 1396 01:26:09,450 --> 01:26:11,190 where the key was the first letter. 1397 01:26:11,190 --> 01:26:15,700 And so this is a complicated, but basically, it hasn't done anything yet. 1398 01:26:15,700 --> 01:26:17,250 We've just cloned that object. 1399 01:26:17,250 --> 01:26:20,220 1400 01:26:20,220 --> 01:26:23,235 And so how are we going to actually add that contact to this array? 1401 01:26:23,235 --> 01:26:28,940 1402 01:26:28,940 --> 01:26:32,506 Well, just like that. 1403 01:26:32,506 --> 01:26:35,790 1404 01:26:35,790 --> 01:26:36,390 Still with me? 1405 01:26:36,390 --> 01:26:41,140 So now, we're returning this object and we're building it up as we go. 1406 01:26:41,140 --> 01:26:46,050 And so we want to say retain all of the previous keys. 1407 01:26:46,050 --> 01:26:49,830 Just say we have A through Z already. 1408 01:26:49,830 --> 01:26:53,580 Make sure we don't lose those, so go ahead and clone that object. 1409 01:26:53,580 --> 01:26:58,110 And override whatever key is equal to that first letter. 1410 01:26:58,110 --> 01:27:00,300 And so the first letter again, is just upper 1411 01:27:00,300 --> 01:27:03,160 cased the first letter of each contact. 1412 01:27:03,160 --> 01:27:08,240 And so we override it with a new array where that new array is the old array, 1413 01:27:08,240 --> 01:27:09,165 but add that contact. 1414 01:27:09,165 --> 01:27:12,060 1415 01:27:12,060 --> 01:27:12,729 Yeah? 1416 01:27:12,729 --> 01:27:19,147 AUDIENCE: [INAUDIBLE] 1417 01:27:19,147 --> 01:27:20,230 SPEAKER 1: Great question. 1418 01:27:20,230 --> 01:27:20,830 No. 1419 01:27:20,830 --> 01:27:25,910 So the question was if objects with the key first letter 1420 01:27:25,910 --> 01:27:27,690 is undefined-- so if this is undefined. 1421 01:27:27,690 --> 01:27:31,190 So say, this is the very first iteration, it's an empty object 1422 01:27:31,190 --> 01:27:33,140 and so object A does not exist. 1423 01:27:33,140 --> 01:27:34,220 Will this still work? 1424 01:27:34,220 --> 01:27:34,720 No. 1425 01:27:34,720 --> 01:27:39,584 So we have to actually handle that corner case still, but great catch. 1426 01:27:39,584 --> 01:27:41,500 And so let's actually handle that corner case. 1427 01:27:41,500 --> 01:27:42,916 So what happens if it's undefined? 1428 01:27:42,916 --> 01:27:53,510 1429 01:27:53,510 --> 01:27:58,660 So now, we'll say oh, if it's undefined, just consider it to be an empty array. 1430 01:27:58,660 --> 01:28:02,247 And so when you spread the empty array then that's nothing and then contact, 1431 01:28:02,247 --> 01:28:04,580 and so you're left with an array with the contact in it. 1432 01:28:04,580 --> 01:28:07,370 1433 01:28:07,370 --> 01:28:09,409 So I'm going to wave my hand at it for now 1434 01:28:09,409 --> 01:28:11,200 since we're running a little short on time, 1435 01:28:11,200 --> 01:28:13,430 but if you have any questions about this function, 1436 01:28:13,430 --> 01:28:19,100 please feel free to slacker email me and I will talk everybody through it. 1437 01:28:19,100 --> 01:28:23,330 And so now, let's go from the contacts by letter 1438 01:28:23,330 --> 01:28:27,250 to something of the shape, title, and data. 1439 01:28:27,250 --> 01:28:29,576 And so how might we do that? 1440 01:28:29,576 --> 01:28:32,200 Well, we can actually just map over those keys and create that. 1441 01:28:32,200 --> 01:28:34,575 And so I'm going to go a little fast in the sake of time. 1442 01:28:34,575 --> 01:28:39,050 1443 01:28:39,050 --> 01:28:44,000 So object dot keys takes all of the keys of an object and in array. 1444 01:28:44,000 --> 01:28:46,950 1445 01:28:46,950 --> 01:28:50,900 So now, this here, is an array where the keys 1446 01:28:50,900 --> 01:28:54,200 are the keys of whatever the contacts by letters are. 1447 01:28:54,200 --> 01:28:56,700 It's going to be something like A, B, C, D, E, F, G, 1448 01:28:56,700 --> 01:29:02,390 but leaving out things like X If we have no friends whose name begin with X. 1449 01:29:02,390 --> 01:29:07,100 Let's just sort it just in case it's not sorted already. 1450 01:29:07,100 --> 01:29:11,180 So say something like, A, C, B. We want that to be A, B, C. 1451 01:29:11,180 --> 01:29:13,765 So we can go ahead and sort it. 1452 01:29:13,765 --> 01:29:15,140 And then let's run a map over it. 1453 01:29:15,140 --> 01:29:18,740 So for each letter, what do we want to do? 1454 01:29:18,740 --> 01:29:22,220 Well, for each letter, we want the section title to be that letter. 1455 01:29:22,220 --> 01:29:26,900 And so we can do the title here is the letter. 1456 01:29:26,900 --> 01:29:34,120 And the data, we actually want to be the data that we created up here. 1457 01:29:34,120 --> 01:29:35,610 And so how might we do that? 1458 01:29:35,610 --> 01:29:40,160 Well, we can just get the contacts by letter 1459 01:29:40,160 --> 01:29:43,590 and grab its key or that keys letter. 1460 01:29:43,590 --> 01:29:46,180 1461 01:29:46,180 --> 01:29:49,400 So again, going a little bit fast because we're short on time, 1462 01:29:49,400 --> 01:29:52,050 but we're grabbing all of the keys of contacts by letter. 1463 01:29:52,050 --> 01:29:54,620 So that's going to look something like the alphabet. 1464 01:29:54,620 --> 01:29:56,910 Sort it to make sure it's in the correct order. 1465 01:29:56,910 --> 01:30:00,440 Then for each of the letters, we turn that letter into an object 1466 01:30:00,440 --> 01:30:03,020 where the object matches the shape. 1467 01:30:03,020 --> 01:30:04,940 Where the title is the letter, and so it's 1468 01:30:04,940 --> 01:30:08,450 going to be something like title A, title B, title C. And the data 1469 01:30:08,450 --> 01:30:10,760 is actually the data that we created up here. 1470 01:30:10,760 --> 01:30:14,150 And so when we do contacts by letter, we pass it the letter, 1471 01:30:14,150 --> 01:30:15,863 it just grabs that array. 1472 01:30:15,863 --> 01:30:19,314 1473 01:30:19,314 --> 01:30:21,160 And then we can pass sections down here. 1474 01:30:21,160 --> 01:30:35,457 1475 01:30:35,457 --> 01:30:36,936 And let me see. 1476 01:30:36,936 --> 01:30:40,890 1477 01:30:40,890 --> 01:30:44,490 So in theory, now we have sections, which 1478 01:30:44,490 --> 01:30:47,220 looks like an array where for each array we 1479 01:30:47,220 --> 01:30:50,960 have an object where the letter is the letter 1480 01:30:50,960 --> 01:30:55,710 of the first letter of every single contact in it's data array. 1481 01:30:55,710 --> 01:30:58,155 And the data array of course, is all of those contacts. 1482 01:30:58,155 --> 01:31:02,340 1483 01:31:02,340 --> 01:31:04,240 And so now, the moment of truth. 1484 01:31:04,240 --> 01:31:07,150 When we toggle the contacts, we see A followed 1485 01:31:07,150 --> 01:31:11,710 by a bunch of people whose first name begins with an A. 1486 01:31:11,710 --> 01:31:16,730 And since there are 1,000 of them, there might be a lot of these. 1487 01:31:16,730 --> 01:31:18,250 And this actually simplify this. 1488 01:31:18,250 --> 01:31:27,050 1489 01:31:27,050 --> 01:31:31,680 Let's make this 100. 1490 01:31:31,680 --> 01:31:36,240 So now, we see A, where we see a bunch of people whose name begin with A. 1491 01:31:36,240 --> 01:31:41,370 We see B, for Benjamin here, and C, and so on. 1492 01:31:41,370 --> 01:31:46,870 Each one with a section header that corresponds 1493 01:31:46,870 --> 01:31:49,850 to the first letter of all those people. 1494 01:31:49,850 --> 01:31:54,740 And if we wanted to style that, we could do so by just changing that render 1495 01:31:54,740 --> 01:31:57,479 section header function. 1496 01:31:57,479 --> 01:31:59,770 And so now, we have something that looks almost exactly 1497 01:31:59,770 --> 01:32:04,210 like the contacts list in your phone. 1498 01:32:04,210 --> 01:32:05,890 But there is one piece missing. 1499 01:32:05,890 --> 01:32:09,246 What happens if you make a new friend? 1500 01:32:09,246 --> 01:32:10,120 And so let's do that. 1501 01:32:10,120 --> 01:32:16,390 Let's have-- or add some sort of way to add new friends to our list. 1502 01:32:16,390 --> 01:32:21,470 And so what sort of things do we need to need in order to do that? 1503 01:32:21,470 --> 01:32:24,620 We should probably have some sort of form where you grab somebody's name 1504 01:32:24,620 --> 01:32:29,039 and grab somebody's phone number, and then it should add that to your list. 1505 01:32:29,039 --> 01:32:30,580 So let's go ahead and implement that. 1506 01:32:30,580 --> 01:32:33,540 1507 01:32:33,540 --> 01:32:35,790 So that requires something called a user input. 1508 01:32:35,790 --> 01:32:41,250 And so something that is often somewhat difficult to handle. 1509 01:32:41,250 --> 01:32:45,480 And so there's a bit of a debate that goes on in the React community, 1510 01:32:45,480 --> 01:32:48,780 more so React Web and less so React Native, 1511 01:32:48,780 --> 01:32:51,540 should we use controlled or uncontrolled components 1512 01:32:51,540 --> 01:32:54,195 and what do these things mean? 1513 01:32:54,195 --> 01:32:58,440 Well, it's where exactly is the source of truth for the value of an input. 1514 01:32:58,440 --> 01:33:02,430 And so if you imagine just in HTML form, you 1515 01:33:02,430 --> 01:33:05,850 have an input where you can type into. 1516 01:33:05,850 --> 01:33:09,930 That input now how has a value, and who's keeping track of that value? 1517 01:33:09,930 --> 01:33:14,120 And so controlled versus uncontrolled component is actually that debate. 1518 01:33:14,120 --> 01:33:19,950 So in a controlled component to react to controls, what's in that value, 1519 01:33:19,950 --> 01:33:21,930 whereas in an uncontrolled component, it's 1520 01:33:21,930 --> 01:33:24,020 actually controlled by the Dom itself. 1521 01:33:24,020 --> 01:33:26,670 And so if you're writing some static HTML 1522 01:33:26,670 --> 01:33:29,640 and you have something like an input tag, when you type into it, 1523 01:33:29,640 --> 01:33:31,610 it retains the value that you type. 1524 01:33:31,610 --> 01:33:35,690 That's because the Dom tracks exactly what you're typing. 1525 01:33:35,690 --> 01:33:39,100 But in a controlled component, React is the one that controls that. 1526 01:33:39,100 --> 01:33:44,250 And so if you imagine now, in the React world if you have an input, 1527 01:33:44,250 --> 01:33:46,710 every single time you change that, React is going 1528 01:33:46,710 --> 01:33:49,199 to have a variable that tracks that. 1529 01:33:49,199 --> 01:33:51,240 And then what determines the value of that input? 1530 01:33:51,240 --> 01:33:54,690 Well, it's whatever value React says that input should have, 1531 01:33:54,690 --> 01:34:00,930 and that should correspond with whatever the value of the variable that React 1532 01:34:00,930 --> 01:34:03,720 is tracking is. 1533 01:34:03,720 --> 01:34:05,560 And so this goes back into the whole like, 1534 01:34:05,560 --> 01:34:07,476 who keeps track of the Dom debate? 1535 01:34:07,476 --> 01:34:09,350 And so in React, you actually have no choice. 1536 01:34:09,350 --> 01:34:11,970 You have to use the React virtual Dom, which 1537 01:34:11,970 --> 01:34:15,800 will then write to the actual Dom. 1538 01:34:15,800 --> 01:34:16,800 And the same thing here. 1539 01:34:16,800 --> 01:34:20,190 So who keeps track of the value of the user input? 1540 01:34:20,190 --> 01:34:22,950 And so in a controlled environment, React does, 1541 01:34:22,950 --> 01:34:24,910 you do as the person writing React. 1542 01:34:24,910 --> 01:34:27,660 You say, every time this input changes I'm 1543 01:34:27,660 --> 01:34:30,540 going to update a value that I'm keeping track of. 1544 01:34:30,540 --> 01:34:36,460 And what dictates what's inside that value, well, it's what I say it is. 1545 01:34:36,460 --> 01:34:41,635 And obviously, you just set that to whatever value you're keeping track of. 1546 01:34:41,635 --> 01:34:43,460 And so we can see that example in a moment. 1547 01:34:43,460 --> 01:34:48,350 1548 01:34:48,350 --> 01:34:52,330 React recommends always using controlled components. 1549 01:34:52,330 --> 01:34:54,940 That way you have those values as JavaScript variables. 1550 01:34:54,940 --> 01:34:58,000 That way if you want to submit a form or do some validation, 1551 01:34:58,000 --> 01:35:00,334 you can do that all in JavaScript because you're 1552 01:35:00,334 --> 01:35:03,250 keeping track of those variables in React and presumably in the state. 1553 01:35:03,250 --> 01:35:06,290 1554 01:35:06,290 --> 01:35:10,080 I mean, how do we actually create those variables? 1555 01:35:10,080 --> 01:35:16,830 Well, you pass a prop called unchanged text to a text input, 1556 01:35:16,830 --> 01:35:22,030 and you pass a value that determines what is the value of that input. 1557 01:35:22,030 --> 01:35:24,990 And if you want to see other props that you can pass to text input, 1558 01:35:24,990 --> 01:35:30,890 you can look at the doc page there, but let's do an example with those. 1559 01:35:30,890 --> 01:35:34,890 And so in order to add contacts, we agreed 1560 01:35:34,890 --> 01:35:38,620 that we needed some sort of way, some sort of page to do so. 1561 01:35:38,620 --> 01:35:40,370 And so let's go ahead and write some page. 1562 01:35:40,370 --> 01:35:43,282 So let's have this thing called, add contact form. 1563 01:35:43,282 --> 01:35:47,480 1564 01:35:47,480 --> 01:35:50,755 And let's have this be a component. 1565 01:35:50,755 --> 01:36:01,910 1566 01:36:01,910 --> 01:36:05,480 We're going to need a couple of components like view, which we've 1567 01:36:05,480 --> 01:36:08,150 seen many times before, and text input, which 1568 01:36:08,150 --> 01:36:12,320 is what we'll be looking at today, and we're going to create this class. 1569 01:36:12,320 --> 01:36:25,350 1570 01:36:25,350 --> 01:36:28,520 So this class is going to have in it a form where 1571 01:36:28,520 --> 01:36:32,300 you can dictate what your user is. 1572 01:36:32,300 --> 01:36:36,260 So in the render function, we're going to want to return 1573 01:36:36,260 --> 01:36:38,990 a view with a couple of text inputs. 1574 01:36:38,990 --> 01:36:44,851 1575 01:36:44,851 --> 01:36:47,350 And then probably we're going to what some button to submit. 1576 01:36:47,350 --> 01:37:02,650 1577 01:37:02,650 --> 01:37:06,840 And so now, we have the shell of what is going to be the add content form. 1578 01:37:06,840 --> 01:37:10,279 And so just like in web or in any other project, 1579 01:37:10,279 --> 01:37:12,070 you have a form that has a couple of inputs 1580 01:37:12,070 --> 01:37:16,900 where each input refers to some value in your contacts. 1581 01:37:16,900 --> 01:37:18,830 In the future, this is going to be the name. 1582 01:37:18,830 --> 01:37:21,190 In the future this is going to be the phone number. 1583 01:37:21,190 --> 01:37:24,250 And of course, some way to add that user to submit it. 1584 01:37:24,250 --> 01:37:28,600 And so we have a button where whereby we can add that contact. 1585 01:37:28,600 --> 01:37:34,900 And so we can go ahead and expect that somebody already 1586 01:37:34,900 --> 01:37:38,300 has implemented that add contact function, 1587 01:37:38,300 --> 01:37:46,295 and so we can state that we're expecting a prop called add contact. 1588 01:37:46,295 --> 01:37:52,040 1589 01:37:52,040 --> 01:37:54,894 And so when we submit this, we're going to just invoke that. 1590 01:37:54,894 --> 01:38:02,540 1591 01:38:02,540 --> 01:38:06,890 But how are we going to keep track of the text inputs? 1592 01:38:06,890 --> 01:38:09,420 Those values? 1593 01:38:09,420 --> 01:38:12,380 And so as you see on the slide, they expect two props. 1594 01:38:12,380 --> 01:38:16,370 They expect a value, so something that determines what their value is. 1595 01:38:16,370 --> 01:38:20,540 And how do you update that value? 1596 01:38:20,540 --> 01:38:24,340 So a function called, unchanged text. 1597 01:38:24,340 --> 01:38:29,280 And so let's actually initialize a state. 1598 01:38:29,280 --> 01:38:32,180 And I'll again, use that shorthand for class properties 1599 01:38:32,180 --> 01:38:36,350 where we're going to have the name be blank and the phone be blank. 1600 01:38:36,350 --> 01:38:39,470 1601 01:38:39,470 --> 01:38:41,480 And so what dictates the value of this one? 1602 01:38:41,480 --> 01:38:45,980 Well, it's going to be the value in the state. 1603 01:38:45,980 --> 01:38:48,780 1604 01:38:48,780 --> 01:38:50,690 And same with the phone down here. 1605 01:38:50,690 --> 01:38:55,500 1606 01:38:55,500 --> 01:39:01,182 And now, let's go ahead and get this form hooked up in our app. 1607 01:39:01,182 --> 01:39:03,640 And I'm going to go a little bit fast for the sake of time. 1608 01:39:03,640 --> 01:39:17,510 1609 01:39:17,510 --> 01:39:18,670 So import that. 1610 01:39:18,670 --> 01:39:21,280 We're going to have in state, we'll say, show form. 1611 01:39:21,280 --> 01:39:25,710 1612 01:39:25,710 --> 01:39:30,220 We want to have some sort of way to toggle that. 1613 01:39:30,220 --> 01:39:31,610 So let's call this, toggle form. 1614 01:39:31,610 --> 01:39:34,920 1615 01:39:34,920 --> 01:39:41,580 And we'll just say, show form is opposite of show form. 1616 01:39:41,580 --> 01:39:44,080 And now, let's have another button. 1617 01:39:44,080 --> 01:39:49,105 Let's get rid of the sort button and instead call it add contact. 1618 01:39:49,105 --> 01:39:56,870 1619 01:39:56,870 --> 01:39:59,510 So now we have another Boolean flag, which 1620 01:39:59,510 --> 01:40:03,440 is updated by a button, which toggles the form. 1621 01:40:03,440 --> 01:40:06,330 And let's do this a quick and easy way for navigation. 1622 01:40:06,330 --> 01:40:12,176 So if we should be showing the form, then just show the form. 1623 01:40:12,176 --> 01:40:16,040 1624 01:40:16,040 --> 01:40:23,530 Otherwise, return the default. And so now, we 1625 01:40:23,530 --> 01:40:25,970 have this been called add contact, and when you click it, 1626 01:40:25,970 --> 01:40:32,350 we see this other page, which we've partially implemented, 1627 01:40:32,350 --> 01:40:35,680 which right now, only has this add contact field. 1628 01:40:35,680 --> 01:40:38,650 So now, let's go ahead and finish up that form. 1629 01:40:38,650 --> 01:40:43,980 1630 01:40:43,980 --> 01:40:45,714 First, let's add some basic styling. 1631 01:40:45,714 --> 01:40:57,660 1632 01:40:57,660 --> 01:41:11,120 Let's give the input some padding, a border, and now 1633 01:41:11,120 --> 01:41:13,215 they should be a little bit more visible. 1634 01:41:13,215 --> 01:41:26,810 1635 01:41:26,810 --> 01:41:31,750 And so now, we should be able to see the inputs up there. 1636 01:41:31,750 --> 01:41:38,610 Again, there's one that's way up there, so let's just add some quick style. 1637 01:41:38,610 --> 01:41:44,820 1638 01:41:44,820 --> 01:41:47,650 So now, we see those two inputs there. 1639 01:41:47,650 --> 01:41:54,215 And if I type into them nothing is happening. 1640 01:41:54,215 --> 01:41:55,169 Why is that? 1641 01:41:55,169 --> 01:41:58,381 1642 01:41:58,381 --> 01:42:00,130 Well, because right now, React is a source 1643 01:42:00,130 --> 01:42:05,000 of truth for the values of these text inputs. 1644 01:42:05,000 --> 01:42:07,850 And what is the value, is this dot state doe name. 1645 01:42:07,850 --> 01:42:10,570 And what is the value of this variable? 1646 01:42:10,570 --> 01:42:12,520 Well, it's a blank string. 1647 01:42:12,520 --> 01:42:14,065 When does it update? 1648 01:42:14,065 --> 01:42:16,690 Well, it never does, which is why no matter how many times they 1649 01:42:16,690 --> 01:42:20,800 bash on the keyboard, nothing is updating in that text input. 1650 01:42:20,800 --> 01:42:25,180 And so how now might we start to update this source of truth? 1651 01:42:25,180 --> 01:42:27,160 Well, we need to tell it how to, so we need 1652 01:42:27,160 --> 01:42:31,060 to create this function called update or let's 1653 01:42:31,060 --> 01:42:40,060 call it handle name change, which takes a new name 1654 01:42:40,060 --> 01:42:45,540 and it will just do this dot set state the name. 1655 01:42:45,540 --> 01:42:51,090 And same thing with the phone number change. 1656 01:42:51,090 --> 01:42:59,690 1657 01:42:59,690 --> 01:43:01,820 So now, we have a couple of handlers. 1658 01:43:01,820 --> 01:43:06,830 We have handle name change, which takes a name and just updates in the state. 1659 01:43:06,830 --> 01:43:10,100 We have a phone, which just takes the phone number 1660 01:43:10,100 --> 01:43:12,470 and updates it in the state. 1661 01:43:12,470 --> 01:43:18,679 And now, all we have to do is tell those text inputs hey, how do we 1662 01:43:18,679 --> 01:43:19,970 update that value in the state? 1663 01:43:19,970 --> 01:43:25,700 Well, on change text, is this dot handle name change. 1664 01:43:25,700 --> 01:43:40,220 1665 01:43:40,220 --> 01:43:43,180 And same thing down here. 1666 01:43:43,180 --> 01:43:47,250 We have the value state dot phone, and the way to update the value 1667 01:43:47,250 --> 01:43:52,860 is by calling this unchanged text, which is this dot handle dot phone change. 1668 01:43:52,860 --> 01:43:59,620 1669 01:43:59,620 --> 01:44:04,466 And so now, when you start to do this, it actually updates accordingly. 1670 01:44:04,466 --> 01:44:07,820 1671 01:44:07,820 --> 01:44:09,830 Lastly, for the phone number, doesn't really 1672 01:44:09,830 --> 01:44:12,800 make sense for it to just be all letters, 1673 01:44:12,800 --> 01:44:16,040 and so another way, another prop that we can pass down 1674 01:44:16,040 --> 01:44:17,540 is this thing called, keyboard type. 1675 01:44:17,540 --> 01:44:20,190 1676 01:44:20,190 --> 01:44:22,062 And we can say numeric. 1677 01:44:22,062 --> 01:44:24,520 And if you want to see what other keyboard types there are, 1678 01:44:24,520 --> 01:44:27,400 you can go ahead and look at the doc pages here. 1679 01:44:27,400 --> 01:44:30,711 But now, when we click the phone number, we see this. 1680 01:44:30,711 --> 01:44:35,860 1681 01:44:35,860 --> 01:44:39,320 And so now we have a way to handle user input. 1682 01:44:39,320 --> 01:44:42,780 And in future lectures, we'll talk about how to maybe validate that 1683 01:44:42,780 --> 01:44:46,300 and how to handle stuff like that. 1684 01:44:46,300 --> 01:44:51,530 And so on that note, I will close the lecture. 1685 01:44:51,530 --> 01:44:53,744