Display dynamic data in your React components by taking advantage of props. With React props, your page will re-render as your data changes. You can also learn more about JSX syntax in this video.
- [Instructor] Currently, we're rendering…our message component to the root, Div,…but what if we wanted to make this message dynamic?…To do this, we'd use React Props.…Now, the first step in working with Props…is to pass data to the message component.…So I'll do that here on line 15.…Here, I'll add a message, and the message should say,…how are you?…All right, so when I hit Save on that,…nothing happens, because we haven't used that property yet.…The place I'll use it is here in the H1.…
So, let's use a JSX expression, the curly braces,…and we're going to use those to wrap the name…of the property that we want to render.…So we'll access them via the this, dot, props object,…and then we'll access it by key.…So message, message, should be able…to see that rendered in the output.…And I do, so the Props object can contain…as many properties as you'd like,…and in a class component, you'll reference them via…this, dot, props, dot, whatever the name of the property is.…
To get a look at this, we can console log…the this, dot, props object, and then,…
- Refactoring elements with JSX
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Conditional rendering
Skill Level Intermediate
1. What Is React?
2. Introduction to React Elements
3. React Components
4. Props and State
5. Additional Library Features
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.