Full React Tutorial #11 - Props

Key Takeaways

all right then gang so right here in the home component we're outputting a list of blogs right and we're doing that directly inside this home component now if you think about it if you're building a real blog website you might have the list of blogs in various places on your website it might be a home page it might also be on a search page or a tag page or a category page there's going to be several different areas which is going to use the same logic essentially where we're cycling through the blogs and outputting a blog preview for each one right so if we were to do that in our project we're not going to do that but if we were to do that then we'd essentially be repeating this code over and over again in different components for different pages eventually so sometimes what i like to do is where i have pieces of components or bits of templates that might be reused in different positions or different places in the website i like to make that bit of template into its own reusable component so for example if i was to make a component called blog list then i could drop that blog list component in any other components in the project so if i was to have a category page later on i could just get that blog list component and drop it in if i had a tag page then i could get that blog list component and drop it into the tag component that makes sense right so we're just reusing the same logic over and over again and we don't have to therefore repeat all of this so that's what we're going to do now we're going to create a blog list component and apart from being reusable as well we're gonna see later on how we can pass in different data into the reusable component every time we use it and we'll do that in the form of props so for example on the home page we might list all of the blogs and show a preview for all of the blogs starting with the latest one but on a search page or a search component we might only show the blogs that match the search term so the data is going to be different the structure is the same but the blogs that we use are going to be different so we can pass in data into these external components as well in the form of props and we'll see those shortly but first of all let's create an external component called blog list to house all of this logic or all of this template so then let's start by creating a new file called blog list.js and then inside here we need a stateless functional component hit tab and we'll call this blog list like so all right so the template is just going to be the template that we have currently right here so let's grab it from here i'm going to cut it and then down here i'm going to first of all create a div with a class of blog hyphen list like so and i'll place it inside here like so so we're still cycling through the blogs and we're still outputting a bit of template for each one so let me save this and now we want to nest this blog list component inside the home component right here so i'm going to say blog list and notice i can click on this and it's going to auto import it for me at the top so let me close this off now and there is a problem with this and we'll see that in a second but let me save it and try and preview it and we get an error and it says blogs is not defined so that's because in the blog list component we're trying to map through the blog so we're using data here but it doesn't know what blogs is because the blogs data is not defined in this component we can't just use any data in another component where it's defined right here because it can't reach that okay so there's a couple of different ways around this the first option is to re-declare all of this data inside this component instead of home so we delete it from here and we place it over here instead the second option is to use props whereby we pass this data from this home component into the blog list components now i'll be using that second option props for three reasons first of all it's going to make our blog list component more reusable and we'll see exactly how later on second it allows me to still use this data in the home component later on if i need it in the future because the data is still going to be declared here and third it allows me to show you how to use props all right so props are a way to pass data from one component a parent component into a child component so this is the parent component and this is the child component right here so we want to pass the blogs data into the blogs list component and the way we do that is by making a property name on this tag so you can call it what you want i'm going to call it blogs since that's what we're passing and this is going to be a dynamic value so curly braces and the value is going to be blocks like so so we just passed that in and now this is being passed into the blog list component as a prop this right here is a prop so we need to receive it inside the blog list components and we get access to an argument inside this function inside the component called props so now this property right here blogs is going to be on this props object so i could access the blogs from it so let me do this i could say const blogs is equal to props dot blogs like so and what i'm gonna do is just log that to the console so i'll say console.log and in fact we'll log out the props as a whole as well and blogs all right so let's come over here and inspect this notice first of all if i refresh everything's still working because we're now passing the blogs into this component and we're grabbing the blogs right here storing them in this constant and then we're cycling through that constant at the bottom so this works now as it should but let's go over here and see what's in the console so this top one right here this is the props object and you can see it has a blogs property on it which is an array and down here this is the blogs themselves all right so any props that we send through into a component are attached to this object which we automatically get as an argument in the component and we can access them now we can pass multiple props if we want to so i could pass in another prop for example called title like so and set that equal to some kind of string now it can be a dynamic value which is stored in some kind of variable but i'm just going to pass in a string value so the title is going to be all blogs and then what i could do is access that as well from the props i could say const title is equal to props dot title all right so let me delete this console.log we don't need that anymore now what i'd like to do is output this title above the blogs so i'll do an h2 and then inside there we'll do the title so if i save this now and preview we can see we get the title as well and if we change that just add an exclamation mark then it's going to update so then that's how we can make a component to take in props data and then use that data inside that component now i said before it makes this component now this blog list component more reusable and it does we can now use this blog list component anywhere in our application whether that's in the home components or in a different page component later on and i'm going to demonstrate that in the next tutorial but before we finish this video i want to show you one more thing if we go to the blog list right here we can see what i accept in this props object and then we're grabbing the different properties from that props object right here and storing them in these variables now an easier way to do this is to destructure the props directly inside these parentheses so i could comment these things out and i could get rid of this and i could destructure from the props directly by saying what properties i want from them so i could say i want the blogs and also the title and now we have these two properties available to us inside this component so this should still work i can delete this entirely save it and check this out it's still gonna work if i refresh