Build a Memory Game with React #4 - Creating a Card Component

Key Takeaways

all right then gang so i think it's about time for a little challenge for you to do and we're going to keep it relatively simple for this first project challenge but then later on there's going to be a slightly more difficult challenge as well so what i want you to do is extract all of this card template into its own components because that's going to make it much easier to apply logic to each card later in the project so you can call that component singlecard.js and put it into the components folder which i've already created over here i've also created a single card.css file which we're going to hook up with our single card component later on as well but anyway when you're done everything should work exactly the same way as it does now the only difference will be that we've extracted the card template into its own component so pause the video here and give this a whirl then if you want to see my solution just hit play okay then so hopefully you had a good go at that now i'm going to show you how i did this so first of all let's create a new file inside the components folder called single card dot js and then inside here i'm going to say underscore rfc and hit tab to create this functional component called single card and then inside this component first of all i'm going to import the css now don't worry if you didn't do this you don't need to do that as part of the challenge i'm just doing that so that later on the card looks a bit nicer but anyway import and it's dot forward slash single card dot css all right then so now what we want to do is take all of this template right here this div and we want to place it inside the card component so let's cut it and place it right here so let's tidy this up we have this div with a class name of card and inside it we have another div with the two images now there's two problems here first of all we don't need the key right here because now we're not inside this map function right here we output the key down here so what i'm going to do is first of all nest our single card component inside this map function so that for each card we're outputting the single card component so let me do that single card oops we need to spell this correctly single card so we also need to import it at the top let me do that up here oh it's automatically done it for me cool so now we can add on the key property which is equal to the card dot id so this is where the key goes right inside this component where we're mapping through the cards now what we can do is we can take it out of this thing right here because we don't need it in this component now the other problem is that we're trying to access the card object right here for the source of the image and we don't have access to that right here it's only in this component that we have access to the cart but what we could do is pass down a prop like so so we'll call the prop card and send it in to that component so we're sending this thing in right here so if we save that now we can accept the prop up here by destructuring it from the props and now we have access to it in the template so this should all work the same way now but before we preview it i just wanted to show you the css that i've added so if we go over here we can see for each card we give it a position of relative and for each image we say width 100 display block border is 2 pixels solid and white and a border radius is 6 pixels so some very very simple styles all right then so let's try this out in the browser everything should still work the same way it's just that now we've moved all of our card template into its own component that can be reused and that's going to make it much easier in the future to apply logic to single cards inside this component and now in a browser everything still looks as though it's working the same way it looks a little bit nicer because we added those styles to the cards right here and if i click on new game they should all shuffle which they do awesome