Reusing Custom React Components by Passing Data Down as Props

Chris Achard
InstructorChris Achard
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

egghead
egghead
~ 26 minutes ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today