Introducing Component Props 0:00Now, when you are writing your components, you'll often find yourself in situations where you want to pass in data to this component from the outside, or from a parent. In those situations, we use properties, or as you'll see them referred to, props. So imagine that we want something as simple as a little avatar component. Something like this. Where we can say avatar, path, and then you pass in some kind of URL. With regular HTML, we think of that as an attribute, or custom attribute in this case. Well, that is a property for our component. Let me show you. This time, I will use a snippet here, and I recommend you do the same. Rendering Avatar Component 0:38Let me show you. This time, I will use a snippet here, and I recommend you do the same. It really does save a lot of time. We want an avatar. We will render it into the body. And now, well, we're going to wrap this within a div tag, and this is generally something you want to do. In fact, there will be situations where you have to do it. If you're just returning a single tag, like an h1, that's fine. But if you have more complicated HTML, quote unquote, then you will want to wrap it. Using this.props.path 0:58If you're just returning a single tag, like an h1, that's fine. But if you have more complicated HTML, quote unquote, then you will want to wrap it. And like I said, we'll talk about that more in a future video. So we want an image here, but now think about it. I need to pass in the path for the avatar, or the image tag. I can say this.props.path, and then we pass it in right here. In this case, I will paste in a path to an avatar image. Okay, so we are loading our avatar component, and we are passing through a path property, which we may now access using this.props.path. Let's take a look in the browser. Linking Avatar Image 1:34which we may now access using this.props.path. Let's take a look in the browser. So we load it, and there you go. It works. Now, maybe we want this to link to the avatar image itself. Okay, that's fine. Wrap it within an anchor tag here. And then once again, we will reference this.props.path. Okay, come back and refresh. And now we can link to it.Okay, come back and refresh. And now we can link to it. We have a proper avatar. Now if this looks familiar, this is the default avatar that will display in the Layercast forum if you have not linked your email address to a photo of yourself at gravatar.com. As an aside, please do that. There's way too many cowboys in the forum. Everyone should be linked to Gravatar. But anyways, that is the default image, so maybe it would be cool to set something up where if you don't pass a path property here, we're just going to reference the default. Setting Default Props 2:18But anyways, that is the default image, so maybe it would be cool to set something up where if you don't pass a path property here, we're just going to reference the default. Otherwise you can pass an overwrite. Well, of course, right now nothing is going to display. We don't have a path property. This is where we can use a new method, getDefaultProps. Think of this as your way of declaring the default properties for your component. So we have path, and I will paste that in here. Okay, so if I come back and refresh, there you go. It still works because we now have default properties.Okay, so if I come back and refresh, there you go. It still works because we now have default properties. However, if we want to use a custom one, then we can do so. Path, and this time I will paste in a different one. Give it a refresh, and that is Bashy at Layercasts. Alright so very clearly this is a super simple example, but it should get the basics across. When you want to pass in data to a component, you use properties. You pass them through just like custom attributes in HTML. And then when you want to set defaults for your component, you use the getDefaultsProperty method and you return an object.And then when you want to set defaults for your component, you use the getDefaultsProperty method and you return an object.
