React alloıs us to send data to a component in the same syntax as HTML,
using attributes or properties on a component. This is akin to passing the
src attribute to an image tag. We can think about the property of the ![]()
< img /> tag as a prop we're setting on a component called img .
We can access these properties inside a component as this.props .
Let's see props in action. Recall, we defined the < Header /> component as:
When we use the < Header /> component, we placed it in our
component as like so:
We can pass in our title as a prop as an attribute on the < Header / > by updating the usage of the component setting the attribute called title to
some string, like so:
Let's see props in action. Recall, we defined the < Header /> component as:
Inside of our component, we can access this title prop from the
this.props property in the Header class. Instead of setting the title statically as Timeline in the template, we can replace it with the property passed in.
Now our < Header /> component will display the string we pass in as the
title then we call the component. For instance, calling our < Header /> component four times like so:
We can pass in more than just strings in a component. We can pass in
numbers, strings, all sorts of objects, and even functions! We'll talk more
about hoı to define these different properties so we can build a component
api later.
Comments