WEBVTT 0 00:00.080 --> 00:00.840 All right guys. 1 00:00.870 --> 00:08.310 So since the last time we worked on our keeper app, we've learned a lot of new concepts such as props 2 00:08.670 --> 00:13.830 and mapping components and looping and React devtools, 3 00:13.830 --> 00:16.410 arrow functions, map filter reduce. 4 00:16.410 --> 00:22.340 So let's go ahead and see if we can apply some of those things to improve our keeper app. 5 00:22.350 --> 00:29.160 This is the keeper app part 2 and you can go ahead and get hold of the starting code sandbox by going 6 00:29.160 --> 00:35.340 to the course resources. If you want to work on your local copy, then go ahead and download a copy of 7 00:35.340 --> 00:43.730 it and then run npm install as well as npm start in order to run it on a local server. 8 00:43.860 --> 00:51.610 But if you're working on it in code sandbox like I am, then go ahead and just fork your own copy. The 9 00:51.610 --> 00:54.760 goal of this challenge is very simple. 10 00:54.760 --> 01:02.350 All we want to do is to render all of the notes that currently live inside our notes.js as an 11 01:02.350 --> 01:09.690 array called notes, into our keeper app as separate note components. 12 01:09.700 --> 01:15.070 This is gonna use a lot of the thing that you learned in the previous lessons especially props and 13 01:15.070 --> 01:16.510 mapping. 14 01:16.570 --> 01:23.740 So this is what the finished app should look like and when you go into the notes.js file, if 15 01:23.740 --> 01:29.170 you add a new entry you should see it pop up dynamically like this. 16 01:29.170 --> 01:35.320 And this is all possible because you're going to be mapping through this array. Go ahead and pause the 17 01:35.320 --> 01:38.360 video and try to give this challenge a go. 18 01:38.380 --> 01:42.390 And once you're done, head back over here and we'll walk through the solution together. 19 01:47.920 --> 01:48.390 All right. 20 01:48.390 --> 01:54.130 So first let's head into our components folder and take a look at our App.js. 21 01:54.480 --> 02:00.720 Here we've got the note component being rendered and we're only asking for one of these components to 22 02:00.720 --> 02:02.030 be rendered. 23 02:02.190 --> 02:05.560 Now at the moment, this component is completely hardcoded. 24 02:05.670 --> 02:10.380 It has a set phrase for the h1 and a set phrase for the paragraph. 25 02:10.380 --> 02:17.760 Now that won't do if we want to use our custom notes from our notes.js. So first let's go into 26 02:17.760 --> 02:20.850 our App.js and pass it some custom props. 27 02:21.210 --> 02:26.070 So the kind of things that we probably want to customize is the title of the note and the content of 28 02:26.070 --> 02:26.550 the note. 29 02:26.610 --> 02:32.590 So let's just create a prop called title and a prop called content. 30 02:32.600 --> 02:42.120 Now I'm just gonna go and move this existing title and existing content over as the values of those 31 02:42.180 --> 02:42.920 props, 32 02:44.240 --> 02:45.190 like so. 33 02:45.710 --> 02:52.880 And this way when I go ahead and look inside my React dev tools inside my note component, I'll be able 34 02:52.880 --> 02:59.180 to see that I've got two props being passed over to the note component which I can then pick up inside 35 02:59.180 --> 02:59.840 my note 36 02:59.870 --> 03:08.810 .js. So inside my note function which is being called effectively from my App.js, I can receive 37 03:08.900 --> 03:16.460 some properties and this object props is going to contain both of these properties, title and content. 38 03:17.000 --> 03:25.250 So I can now insert it into my

inside a set of curly braces and I can inject that as props. 39 03:25.310 --> 03:35.330 title and do the same with my content, so props.content. And these two properties should in fact work 40 03:35.390 --> 03:39.360 when I pick up my note because I'm using the right names of the properties. 41 03:39.680 --> 03:46.190 And frequently you get mismatches in terms of typos when you're trying to access a property and you 42 03:46.190 --> 03:54.590 miss out on the content or you get typos when you are passing a prop over in terms of the key and you 43 03:54.590 --> 03:55.920 get missing content. 44 03:56.090 --> 04:02.870 But with our React dev tools and being able to view the props, it should help us debug any issues on that 45 04:02.870 --> 04:05.230 front. All right. 46 04:05.260 --> 04:12.700 So now that we've got our note rendering some custom content using props, we can now think about how we 47 04:12.700 --> 04:18.910 can render multiple notes because our notes.js has lots of different notes with different titles 48 04:19.000 --> 04:20.740 and different content. 49 04:20.740 --> 04:28.030 One way is we could create lots of these note components but of course now that we know all about the 50 04:28.090 --> 04:38.110 mapping strategy, then the easiest way is to use the map function. In order to map through the array of 51 04:38.110 --> 04:42.800 notes, we first have to export it from this file where it lives. 52 04:42.820 --> 04:52.330 So export default notes. And then let's go ahead and catch it over and in our App.js. So let's import 53 04:52.360 --> 04:57.600 notes from ../notes. 54 04:57.820 --> 04:58.060 All right. 55 04:58.090 --> 05:07.420 So now that we've got access to this array called notes and we can log it to see its value which is just 56 05:07.420 --> 05:15.760 currently four objects with different titles and content, given that we've got this array we can then 57 05:15.790 --> 05:24.910 go into our app and replace this single note with a whole bunch of notes generated from a map function. 58 05:24.970 --> 05:32.260 So let's go ahead and tap into the notes array that we just got hold of, called the map function and inside 59 05:32.260 --> 05:39.730 the map function we're going to pass it a function that is going to create notes. 60 05:39.900 --> 05:49.110 So this createNotes needs to get a single note item passed into it and once it does though it's going 61 05:49.110 --> 05:56.700 to return a note component that is going to have some props being sent over. 62 05:56.700 --> 06:00.830 Remember the props that we defined previously were title and content 63 06:00.900 --> 06:09.450 so let's add a title prop and let's add a content prop. So the title is going to be based on the note 64 06:09.480 --> 06:11.850 item that gets passed over to this function, 65 06:11.880 --> 06:19.920 so it's gonna be noteItem.title and let's just check inside our notes.js that indeed that 66 06:19.920 --> 06:22.980 those are the names of the properties, title and content. 67 06:23.550 --> 06:32.720 So noteItem.title and noteItem.content. And of course because this is Javascript code it needs 68 06:32.720 --> 06:36.300 to be wrapped inside a set of curly braces to be valid 69 06:36.360 --> 06:37.320 JSX. 70 06:38.000 --> 06:44.750 Now that we've got this function createNotes that takes a single note item and renders a custom note 71 06:44.780 --> 06:45.520 component 72 06:45.710 --> 06:49.820 we can pass that createNote function into our map. 73 06:49.850 --> 06:56.450 So now if we wrap this whole line inside a set of curly braces, then it should be able to render our 74 06:56.450 --> 07:04.190 notes with different titles and different content using the data that we've got inside on notes. 75 07:04.220 --> 07:06.310 js. 76 07:06.410 --> 07:12.140 Now there's a couple of things to remember though. Remember that whenever we want to map or loop through 77 07:12.620 --> 07:22.190 a array in order to create dynamic React components such as these notes, we always have to add a key 78 07:22.190 --> 07:27.980 prop and that key proper has to be unique amongst all of the same components. 79 07:28.160 --> 07:33.870 So there can't be no note component that has the same key. Luckily inside on note. 80 07:33.890 --> 07:44.680 js, we've also got a key property defined so we can just set this as the noteItem.key. This way 81 07:44.740 --> 07:50.890 we clear any of the errors that are in our console and we're making React happy with the job that we're 82 07:50.890 --> 07:52.920 doing now. 83 07:52.920 --> 07:56.730 The next thing to note is we learned about arrow functions 84 07:56.730 --> 07:57.030 right? 85 07:57.060 --> 08:01.060 So we can vastly simplify and cut down on our code 86 08:01.230 --> 08:04.150 and in fact I would argue it would make easier to read. 87 08:04.200 --> 08:05.610 So let's go ahead and do that. 88 08:05.730 --> 08:12.900 So first I'm going to move this function from the outside into the inside of my map function. So everything 89 08:12.900 --> 08:14.140 still works the same 90 08:14.220 --> 08:21.600 but now it's just being defined inside another function and at the position where it's being used. 91 08:21.720 --> 08:27.290 Next I'm going to turn this into an anonymous function by deleting the name of the function, 92 08:27.390 --> 08:35.220 so everything still works. And then I'm going to simplify things even further by turning this into an 93 08:35.250 --> 08:37.230 ES6 arrow function. 94 08:37.320 --> 08:44.610 So I'm going to delete the function keyword, add a fat arrow between the input and the body of the statement 95 08:45.240 --> 08:53.100 and then because I've only got a single item being returned which gets treated effectively as a single 96 08:53.100 --> 09:01.410 line of code I can actually also delete my return keyword as well as the curly braces that enclose the 97 09:01.410 --> 09:11.610 entire block of code. And instead I can simply just tag this on at the end as a single line of code like 98 09:11.610 --> 09:13.160 so. 99 09:13.170 --> 09:21.360 So now everything still works exactly the same as before but we're using our arrow function in order 100 09:21.360 --> 09:26.250 to pass a function that maps through our array of notes 101 09:26.400 --> 09:32.880 and for each of the notes inside the array, it's going to carry out this functionality which is to create 102 09:32.880 --> 09:35.820 a new note using the properties from that note 103 09:35.850 --> 09:39.720 Item. Did you manage to complete the challenge? 104 09:39.720 --> 09:46.710 If not, be sure to review some of the previous lessons that we covered including props as well as mapping 105 09:46.710 --> 09:53.890 components. So in the coming lessons we're going to level up our skills in React development even more 106 09:54.190 --> 09:58.330 so that we can add more functionality to our keeper app. 107 09:58.330 --> 10:06.490 Things such as how to handle user inputs, how to dynamically add new notes from the user input, how to 108 10:06.490 --> 10:13.900 deal with forms, how to delete notes and much much more. So once you're done reviewing the code here and 109 10:13.960 --> 10:19.000 completing the challenge on your side, then head over to the next lesson and we're going to learn about 110 10:19.060 --> 10:23.490 conditional rendering. So for all of that and more, I'll see you there.