5.3 Display a Deck of Cards

Now that we can create flash cards the next step is being able to display them. Now we are already have our visible cards component, but right now it doesn't really display anything. So let's expand this component so that it will display whatever cards are in the currently selected deck. The first and most obvious step I think is that this props object that is passed to the cards component function here will take more than just the children as a parameter. It's also going to have a property called cards and this is going to be the list of card objects that we want to display. So then inside this div. Let's expand this a little bit, and let's see. First thing I wanna do is add a class name to this div, will just say main, and now inside here right now we just have the text deck will display here and children. Let's get rid of the text deck will display here and we'll leave the children. But then above the children, we're going to display our cards here. And this is going to be very simple. We'll just say cards.map. And we're going to map over our cards. So for each card, what we'll return is a new card element. Now we're going to create this component in just a second here but this card component is what is actually going to display each one of our cards. And we'll make it very easy here, we'll just set the card equal to card. And we'll set the key. Equal to card.id. Now remember because we're going to be displaying multiple card elements beside each other here. We need to give each one a key and so we'll just use the unique ID as the key for that card that's actually all we need for the cards object. However there are a few other pieces to put into this puzzle. Let's go ahead and import card from the card file. We haven't created that yet but we'll do that very soon. Now the other thing of course is the connect function. So let's import connect from react-redux and now, let's make our map state to props function. We know that this function will get two parameters, the props and the router, and this is the first container component that's actually going to need something from both of those. From the props object here, we're just going to need the cards property. So let's destructure this and just get the array of cards that we have. And then for the rotor here. Let's de-structure this and we need params and then we need deck ID. Just as we've done before. Inside the object that we return from map state to props. We know that we need a cards array and let's start with the current cards array, but then we're going to do some filtering. So for each card we'll only keep the ones where card.deckId is equal to the deckId that we get in the URL. So this is how we can choose exactly which cards to display at any given time. when we click on one of our list names on the deck sidebar the deck ID will be set and then we can use that to filter through our list of all cards. Now the only thing to do is connect these parts. So let's go ahead and say export default connect and we'll pass that map state to props and then to that function. We will pass cards and now we have our completed. visible cards component of course we can't quite see this yet because we haven't created our card component yet. So let's create the file source slash components slash card. J.S. well go ahead and import react and we're also going to import link from the react rotor because each individual card will need to have a link to the edit modal. All right so let's go ahead and create our card component. This is going to be a function. And as we already saw it's going to take a single property and that will be the card. Again of course, we're destructuring from the actual props object in here. Let's go ahead and return to Dave and we'll give this a class name of card then inside this let's put another day of and this is going to wrap a paragraph and this paragraph is going to have card front. So when our cards are listed in the main area of our application will be able to see whatever the front of the card might be and then underneath this, let's put a link, and this link will just have the text edit, and we will have to give it a few properties. Let's see. Well give it a class name of button so that it looks like a button, and then we'll set this to, and again, we'll use the string template syntax, and we'll go to /deck/, and then let's interpolate card .deckId/edit and then forward slash and then we'll integrate card.id. So the whole URL is deck/deckId/edit/cardid. Right that's actually everything we need. So let's go ahead and say export default card and we should be good to go. If we had back to the browser you can see that right now we have no deck selected. If I click on deck one over here, however you can see the deck one becomes visible when we click that. So, we have two cards that we've already made in this deck and they are now visible. Of course we also have the toolbar for deck tools that we previously made, but now we can actually see the cards that we have in our deck. If I move over to tech to you can see that because of our filter, we're showing no cards because there are none that belong to deck two. Let's add a new card. And if I say this you can see that this card shows up for deck two we can go back to deck one and now we have the deck one cards. Excellent and you can see when I have her over a card our edit button appears. I can go ahead and click that edit button and notice that the U.R.L. changes to deck deck ID EDIT EDIT ID and of course we don't have a route to match that right now but will take care of that in the next lesson.