Now, we walked through two examples. We walked through the ability to be able to call these components, specifically this PortfolioItem component, and then like we saw in the browser, that showed four items, if we had four items in the array.

Now, we also created an H1 tag and then we passed data directly into that, so we used string interpolation and so we passed each one of the names in there. And that's really what we want to do, we want to be able to pass in data directly into the component so that PortfolioItem component, all those nested components can have access to the title and eventually images, and descriptions, and links, and things like that.

But for right now we're just going to work specifically on the title and we're going to learn about a very important topic in React called props, which is short for properties. Props are the way that you can pass data from one parent component to a child component.

Let's walk through how to do that, so by the end of this I want to be able to render out each one of the names. But instead of doing it in a hard-coded way, or doing it directly in the map function, we are going to have our child component, the PortfolioItem component do it for us, so let's see how we can do that.

Well, the very first thing that we're going to do when you're passing in a prop is the syntax for that is to define it directly in line with the component. Here with PortfolioItem, what I can do is say, title, just like this, equals, and then using curly brackets I'm going to pass in some JavaScript.

In this case, I'm going to pass in the item, which we know is going to give us the element of the array. Here I can say, title equals item, then we need a way inside of our portfolio item, in order to be able to receive that and then render it on the page. I'm going to hit save here and I'm going to open up the portfolio-item file.

The way that we can do this, is we have to tell the function that it is going to accept props. Here inside of the functional component, I'm going to pass in an argument called props.

Now, we know we're going to receive something and, instead of inside of this H3, instead of just hard-coding portfolio item, now let's use string interpolation, so we're going to use curly brackets, and then pass in props, just like this, so both of those are saved, if we switch back now ... Oh, it looks like we have an error, let's see what that is. Okay, uncaught error, objects are not valid as a React child. Okay, this is a mistake, but this is actually a good one to keep in here.

You notice how I called title here.

That is the name of the prop, but then I forgot to actually call title. So props is an object and if you ever see an error, just like this one, this is the reason why I don't edit these out, because I promise you I run into this one many times, you will also run into it.

If you see an error that says, "Objects are not valid as React child elements," what that means is that we tried to pass in, or call an object directly in the render function, because props is even if you only pass one item, props is actually going to pass in all of the elements. If you come back here, now just say props.title and that should fix the error.

portfolio-items.js

import react from "react";

export default function(props) {
    return (
        <div>
            <h3>{props.title}</h3>
        </div>
    );
}

Coming back and there we go, now it is working. Hopefully, you also see that when you run into those types of errors, I've seen that error so I didn't have to Google it. I've run into that error many times. But if you did not... if that's an error you've never seen, you run into something that you've never seen before, first open up the JavaScript console, that is going to be your go-to place, that is where your errors are going to be showing up.

If the error doesn't really make sense, if it's not clear what happened, just copy that error code and Google it. It does not matter how long you've been doing this, I've been doing this for over 15 years, I Google things constantly, I Google error messages, anything like that.

Please, that is a very, very common process. That should be the very first thing you do before you go ask anyone, or anything like that. Part of learning how to be a developer is learning how to debug, because you're going to be fighting against bugs all day long. As you saw right there, that one told us pretty much exactly what we needed to do, we were passing in the wrong data. That also kind of helps explain the way that props work.

When we loop through here, we passed in title. Now, if we were to pass in something else, so let's just hard-code something in here, let me pass in, say, URL. Then inside of URL I'm going to pass in a string and we'll just say, "google.com." All of them are just going to be hard-coded, later on, we're going to be pulling in live data that'll have it.

But the way this works is now our portfolio item doesn't just have access to title, it also has access to URL. If I were to save this and come back here to portfolio-item.js, and let's just put in a H4 tag, and so now what I can do is, using curly brackets, I can now say, "props.url", hit save and now if you switch back, now you can see how it's passing in Google each time.

That's the reason why we weren't able to just call props directly, was because props is an entire object, it is going to be any items that you pass in. If you pass in 10 items, then those items are going to each be a key and a value pair. In this case, we're passing in the key and the value of title and URL. When you call those directly in the render function, then you can have that shown on the page.

In review, when you're working with props, the steps that you need to take is, one, you need to define the list of props and pass data to them whenever you're calling the component. Then, you need to pass in props to the function argument so that that child component knows that it's going to be receiving some data.

Then from there, you call props. and then whatever the name of that specific property was, in this case, it was title and URL. If you do all of those things, you'll be able to start passing data directly from a parent component into a child.

Resources

• Source Code