All right guys. 1
So since the last time we worked on our keeper app, we've learned a lot of new concepts such as props 2
and mapping components and looping and React devtools, 3
arrow functions, map filter reduce. 4
So let's go ahead and see if we can apply some of those things to improve our keeper app. 5
This is the keeper app part 2 and you can go ahead and get hold of the starting code sandbox by going 6
to the course resources. If you want to work on your local copy, then go ahead and download a copy of 7
it and then run npm install as well as npm start in order to run it on a local server. 8
But if you're working on it in code sandbox like I am, then go ahead and just fork your own copy. The 9
goal of this challenge is very simple. 10
All we want to do is to render all of the notes that currently live inside our notes.js as an 11
array called notes, into our keeper app as separate note components. 12
This is gonna use a lot of the thing that you learned in the previous lessons especially props and 13
mapping. 14
So this is what the finished app should look like and when you go into the notes.js file, if 15
you add a new entry you should see it pop up dynamically like this. 16
And this is all possible because you're going to be mapping through this array. Go ahead and pause the 17
video and try to give this challenge a go. 18
And once you're done, head back over here and we'll walk through the solution together. 19
All right. 20
So first let's head into our components folder and take a look at our App.js. 21
Here we've got the note component being rendered and we're only asking for one of these components to 22
be rendered. 23
Now at the moment, this component is completely hardcoded. 24
It has a set phrase for the h1 and a set phrase for the paragraph. 25
Now that won't do if we want to use our custom notes from our notes.js. So first let's go into 26
our App.js and pass it some custom props. 27
So the kind of things that we probably want to customize is the title of the note and the content of 28
the note. 29
So let's just create a prop called title and a prop called content. 30
Now I'm just gonna go and move this existing title and existing content over as the values of those 31
props, 32
like so. 33
And this way when I go ahead and look inside my React dev tools inside my note component, I'll be able 34
to see that I've got two props being passed over to the note component which I can then pick up inside 35
my note 36
.js. So inside my note function which is being called effectively from my App.js, I can receive 37
some properties and this object props is going to contain both of these properties, title and content. 38
So I can now insert it into my inside a set of curly braces and I can inject that as props. 39
title and do the same with my content, so props.content. And these two properties should in fact work 40
when I pick up my note because I'm using the right names of the properties. 41
And frequently you get mismatches in terms of typos when you're trying to access a property and you 42
miss out on the content or you get typos when you are passing a prop over in terms of the key and you 43
get missing content. 44
But with our React dev tools and being able to view the props, it should help us debug any issues on that 45
front. All right. 46
So now that we've got our note rendering some custom content using props, we can now think about how we 47
can render multiple notes because our notes.js has lots of different notes with different titles 48
and different content. 49
One way is we could create lots of these note components but of course now that we know all about the 50
mapping strategy, then the easiest way is to use the map function. In order to map through the array of 51
notes, we first have to export it from this file where it lives. 52
So export default notes. And then let's go ahead and catch it over and in our App.js. So let's import 53
notes from ../notes. 54
All right. 55
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
currently four objects with different titles and content, given that we've got this array we can then 57
go into our app and replace this single note with a whole bunch of notes generated from a map function. 58
So let's go ahead and tap into the notes array that we just got hold of, called the map function and inside 59
the map function we're going to pass it a function that is going to create notes. 60
So this createNotes needs to get a single note item passed into it and once it does though it's going 61
to return a note component that is going to have some props being sent over. 62
Remember the props that we defined previously were title and content 63
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
item that gets passed over to this function, 65
so it's gonna be noteItem.title and let's just check inside our notes.js that indeed that 66
those are the names of the properties, title and content. 67
So noteItem.title and noteItem.content. And of course because this is Javascript code it needs 68
to be wrapped inside a set of curly braces to be valid 69
JSX. 70
Now that we've got this function createNotes that takes a single note item and renders a custom note 71
component 72
we can pass that createNote function into our map. 73
So now if we wrap this whole line inside a set of curly braces, then it should be able to render our 74
notes with different titles and different content using the data that we've got inside on notes. 75
js. 76
Now there's a couple of things to remember though. Remember that whenever we want to map or loop through 77
a array in order to create dynamic React components such as these notes, we always have to add a key 78
prop and that key proper has to be unique amongst all of the same components. 79
So there can't be no note component that has the same key. Luckily inside on note. 80
js, we've also got a key property defined so we can just set this as the noteItem.key. This way 81
we clear any of the errors that are in our console and we're making React happy with the job that we're 82
doing now. 83
The next thing to note is we learned about arrow functions 84
right? 85
So we can vastly simplify and cut down on our code 86
and in fact I would argue it would make easier to read. 87
So let's go ahead and do that. 88
So first I'm going to move this function from the outside into the inside of my map function. So everything 89
still works the same 90
but now it's just being defined inside another function and at the position where it's being used. 91
Next I'm going to turn this into an anonymous function by deleting the name of the function, 92
so everything still works. And then I'm going to simplify things even further by turning this into an 93
ES6 arrow function. 94
So I'm going to delete the function keyword, add a fat arrow between the input and the body of the statement 95
and then because I've only got a single item being returned which gets treated effectively as a single 96
line of code I can actually also delete my return keyword as well as the curly braces that enclose the 97
entire block of code. And instead I can simply just tag this on at the end as a single line of code like 98
so. 99
So now everything still works exactly the same as before but we're using our arrow function in order 100
to pass a function that maps through our array of notes 101
and for each of the notes inside the array, it's going to carry out this functionality which is to create 102
a new note using the properties from that note 103
Item. Did you manage to complete the challenge? 104
If not, be sure to review some of the previous lessons that we covered including props as well as mapping 105
components. So in the coming lessons we're going to level up our skills in React development even more 106
so that we can add more functionality to our keeper app. 107
Things such as how to handle user inputs, how to dynamically add new notes from the user input, how to 108
deal with forms, how to delete notes and much much more. So once you're done reviewing the code here and 109
completing the challenge on your side, then head over to the next lesson and we're going to learn about 110
conditional rendering. So for all of that and more, I'll see you there.