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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!