Made withReactClip

Full React Tutorial #11 - Props

N

Net Ninja

Creator on the React channel

Watch on YouTube ↗

461K viewsJan 4, 20218:56 runtime

Learn a core concept in React development: creating reusable components and passing data with props. This tutorial guides you through refactoring a hardcoded blog list into a dynamic, reusable `BlogList` component, a best practice for maintainable code. Discover how to pass…

Chapters

#react#clip#frontend

Refactoring for Reusability

To avoid duplicating code across your application, you can extract repetitive JSX and logic into separate, reusable components. In this tutorial, the logic for displaying a list of blogs was moved from the Home component into a new, dedicated BlogList component.

Problem: Displaying a blog list on multiple pages (Home, Search, Category) would require repeating the same mapping logic.
Solution: Create a single BlogList.js component that can be imported and used wherever it's needed.

Understanding Props

Props (short for properties) are the mechanism for passing data from a parent component to a child component. This allows reusable child components to be dynamic and display different data based on where they are used.

Important
Data flow in React is one-way: from parent to child. Child components receive props as read-only data and should not modify them directly.

Passing and Receiving Props

Passing Props (Parent Component)

In the parent component's JSX, you pass props to the child component as if they were HTML attributes.

Passing dynamic data (e.g., from state): Use curly braces {}.
```
<BlogList blogs={blogs} />
```
Passing static data (e.g., a string): Use double quotes "".
```
<BlogList title="All Blogs!" />
```

Receiving Props (Child Component)

The child functional component automatically receives a props object as its first argument, which contains all the properties passed down from the parent.

const BlogList = (props) => {
  const blogs = props.blogs;
  const title = props.title;

  return (
    <div className="blog-list">
      <h2>{title}</h2>
      {blogs.map(blog => (
        <div className="blog-preview" key={blog.id}>
          <h2>{ blog.title }</h2>
          <p>Written by { blog.author }</p>
        </div>
      ))}
    </div>
  );
}

Destructuring Props

A more modern and cleaner approach is to use ES6 destructuring to pull properties directly out of the props object in the function's parameter list.

Tip
Destructuring makes your component code more concise and readable by eliminating the need to repeatedly reference the props object.

// Instead of (props), we use ({ blogs, title })
const BlogList = ({ blogs, title }) => {
  return (
    <div className="blog-list">
      {/* You can now use 'blogs' and 'title' variables directly */}
      <h2>{title}</h2>
      {blogs.map(blog => (
        <div className="blog-preview" key={blog.id}>
          <h2>{ blog.title }</h2>
          <p>Written by { blog.author }</p>
        </div>
      ))}
    </div>
  );
}

The Case for Reusable Components & Props

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 BlogList, then I could drop that BlogList component in any other components in the project. So, if I was to have a category page later on, I could just get that BlogList component and drop it in. If I had a tag page, then I could get that BlogList 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 BlogList 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.

Refactoring into a Child Component

But first of all, let's create an external component called BlogList to house all of this logic or all of this template.

So then, let's start by creating a new file called BlogList.js. And then inside here we need a stateless functional component. Hit tab, and we'll call this BlogList 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-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 BlogList component inside the Home component right here. So I'm going to say BlogList, 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 BlogList component we're trying to map through the blogs, 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.

Passing and Receiving 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 BlogList 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 blogs like so. So we just passed that in, and now this is being passed into the BlogList component as a prop. This right here is a prop.

So we need to receive it inside the BlogList component. 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 = props.blogs; like so. And what I'm going to 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.

Using Multiple Props

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 = props.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 BlogList component, more reusable. And it does. We can now use this BlogList component anywhere in our application, whether that's in the home component or in a different page component later on. And I'm going to demonstrate that in the next tutorial.

Destructuring Props for Cleaner Code

But before we finish this video, I want to show you one more thing. If we go to the BlogList right here, we can see we're accepting 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 going to work if I refresh.