React Context & Hooks Tutorial #17 - Reading List App (part 2)

Key Takeaways

okay then so now we've done the header component right here and we've consumed the context and that's how we can output this data right here two books to get through and we've created that context and we've now surrounded our navbar component with that context provider so what we need to do now is just address these other components and nest those inside here as well so they can have access to that context so the next thing I'd like to do is at the book list to cycle through the data we're going to consume that book context and cycle through those books so we can output something for each book so all that is now first of all import react and we also need to import that hook use context like so and now we can create this functional component so SFC tap and we'll call this book list and then inside this we're going to use the context so use context and we want to use the book context right here so book context there we go and then we need to destructure what we want from this context so I'll say Const books and set that equal to this use context hook ok so we have the data we need notebooks and inside our template we just need to cycle through those box and output something for each one but before we do that what I'd like to do is check does the books array have any length if it does have length then we want to cycle through them if it doesn't then we're just going to output something else instead so I'm going to say return then books dot length this is going to be a ternary operator so we're going to evaluate books dot lengths and then if it does have length then it's going to return this jsh right here if it doesn't then after the colon it will return a different bit of JSX so this bit first of all we'll do it's just going to be a div with a class name equal to empty to say hey we've got no books and then we'll just say no books to read hello free time okay so that's as simple as that do we need to close this div off yes we do so close that off okay let's delete one of those so this is what we're gonna return if this doesn't have length now if it does we want to return something else so in that case we want to return a deal for the class name equal to book - list like so and we can close that off and then inside here just a ul and then we want to output an li tag I'll rather not an li tag we want to output a book details component for each individual book so let's map through those books first of all by saying box dots map and then we'll say for each book we want to return something so we'll say return a little bit of JSX and that is going to be a book details components where the book prop that we passed out is going to be equal to the individual books that we're currently iterating right here we also need to pass a key into this so that is going to be equal to the book dots ID and that's all there is to it we don't need a closing tag this is self closing okay so now we're returning this bit of JSX for each individual book inside this box array if they have lengths if they don't have length then we're just going to output this template instead so that's all we're doing a ternary operator to evaluate the length if there is length I'll put this it does not output this so now we need to do this book details component right here and for some reason I've got this import statement at the top not sure that I came from we don't need that but anyway now what we can do is go to this book details over here and flush out this soap first things first imports react and also we want use context so use context like so and then down here we can say SFC tap and this is called book details so remember we take in a prop called book right here so we need to and get that using a little D strip drink up here and we just want the book like so so now we have access to this individual book inside this components now I also want in this component to consume the context because I want if we open this up this function remove book because when we click on an individual book inside this book details components I want to trigger that function to delete that book to cross it off so I'm going to say Const and then remove book is equal to use context and we're going to use the book context like so okay so then now we want to do our template for this and this is going to be an ally attack because we're currently inside a ul remember we're returning a book details component for each book inside a ul tag so each one of these needs to be an li tag and inside that I'm going to do a div for the title and a div for the author so div class name is equal to title first of all and inside that we just want to output the book title remember we have the book property because we got it as a prop and then below that I'm going to duplicate it change this to author and then also this property to author because we want to output the author here so that should work that should show us the book and in fact let me save this and also we need to come over here and actually import book details so let me do that now import book details from and it's dot forward slash book details because we're in the same folder so now if I save this and come over here we should see oops no we don't because we need to nest book list inside up so let's do that now book list right there okay so now if we save and come over here we should see this thing right here okay yeah the outputs in these books to the browser so that's good we're now cycling through that state and showing it in the browser however like I said when you click on one of these books I want it to delete that book so now let's go back into book details and attach a click event to this Li tuck so I'm going to say on click and set that equal to something and inside here I'm going to do an inline arrow function and in fact we don't need these extra curly braces because it's all in one line and I'm just going to use that function remove book and we need to pass in an ID to this function remember because inside book context we taking that ID and that's how we filter the books array so let's pass in the ID of the current book we have by saying book dots ID so then if we save this now and come over here then if we click on one of these it's going to remove it and you can see this goes to one as well because that data is updating and if we click on this again it goes to zero and now we can see no books to read hello freetime awesome so this is our working however it looks a bit crude at the minute so what I'm gonna do again is just copy some CSS from my repo and I'm gonna paste it over here inside the CSS file if I can find it down here so what are we doing well we're just giving the book list div a margin of 20 pixels I remember that is this thing over here so they're surrounding div of this components and then in the UL of that we're stripping out the padding and giving it a list-style-type:none so it doesn't have those little circles to the left of it then each li is going to have this purpley color background border-radius some padding and then a cursor:pointer so when we hover over its that little finger and we know we can click it a margin of 10 pixels top and bottom zero left and right when we hover over one of these Li tags one of these books then the opacity is going to go down so it's gonna fade a little bit and the text decoration is going to be aligned through and that kind of indicates that you can click it and get rid of that book which is what we want to happen okay so then the title property inside the book details which is this thing over here we have a title and an author the title property font-weight:bold is white and a little larger than the normal font size the author is a little smaller in font size and more of a gray color we have this empty div which is if we look inside Booklist this thing right here when there's no books and all we're saying is give this a margin of 20 pixels all the way around and text-align:center so hopefully this should make the application start to look a little bit better if we go over here I'm going to refresh because then we'll get the state back because we're not storing this date anywhere it's not in a database every time we reload the application is going to reinitialize that state inside the context to be this right here so let me refresh and we see these two things and when we hover it looks like we can click them to get rid of them and we can do and then when they're gone we get this message instead so we're making pretty good progress now we've now created three of the four components we need to do the only one left is this book form right here to add a new book and we're going to tackle that one in the next video