In this video, learn more about how to display multiple pieces of dynamic data in a React component with React props. With props, you can pass the data to the component and, as it changes, re-render the component.
- [Instructor] Let's update our project…to include a slightly more robust example.…So, I live in a ski town and I'm obsessed with skiing.…So, I want to build a page…that will count my ski days for the year.…You can customize your data to count anything you want,…days you've exercised, books you've read,…National Parks you've visited, whatever,…whatever you're most passionate about.…So, I'm going to go ahead and add this data here…to line four, and I'm going to call it skiData.…And we'll just create an object here…with a few numbers.…
We'll have a total number of ski days,…a number of powder days, hopefully a lot,…a number of backcountry days…when we're skiing outside of the resort,…and then a goal, so the number of days…I'd like to be able to ski per year.…Now, the next thing I want to do…is create a component called a SkiDayCounter.…So, we'll go ahead…and replace the message component with that.…So SkiDayCounter is again going to extend React.Component.…
And let's go ahead and render the following.…We'll just simply render a section with Ski Days.…
- 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.