Reusing Custom React Components by Passing Data Down as Props
To pass data from a parent react component to a child react component, we can supply "attributes" to the JSX tags like:
<Greeting name="React" />
That name attribute is then available in the Greeting component as a prop (which is an object passed in as the first argument to the react function component.
That means we can display that name from the props argument like this:
function Greeting(props) {
return(<p>{props.name}</p>)
}
And so you can customize any react component by passing data down in the form of that props argument.
Chris Achard: [0:00] To pass data from a parent to a child, we use something called props, or properties. We can pass them as attributes on the JSX tag. This name might be React, and this name might be something different, like Chris. Inside of our function component, the props come in as the first argument to the function.
[0:20] Now, we do not have this name anymore. We have it coming in on our props, so we're going to say props.name, because props is an object filled with whatever attributes we add to it. If we save, we get "Hello, React!" and "Hello, Chris!" Notice how these two Greeting components they can have different props, because they are independent.