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.…
Author
Released
12/18/2018- Refactoring elements with JSX
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Conditional rendering
Skill Level Intermediate
Duration
Views
Related Courses
-
React: Ecosystems
with Emmanuel Henri12m 21s Intermediate
-
Introduction
-
1. What Is React?
-
What is React?59s
-
Inspect React sites1m 31s
-
-
2. Introduction to React Elements
-
Install create-react-app1m 28s
-
Generate a project3m 2s
-
Create React elements4m 20s
-
-
3. React Components
-
Create a React component2m 16s
-
Add component properties3m 35s
-
Add custom methods1m 39s
-
Create function components3m 53s
-
-
4. Props and State
-
Compose components4m 48s
-
Display child components4m 42s
-
Introducing state3m 30s
-
Using setState4m 16s
-
Pass state as props2m 58s
-
Conditional rendering3m 5s
-
-
5. Additional Library Features
-
Component life cycle3m 10s
-
Fetching data4m 43s
-
Accessibility2m 6s
-
Forms4m 7s
-
Default props3m 29s
-
PropTypes3m 56s
-
Modularizing code3m 58s
-
Build the app2m 1s
-
-
Conclusion
-
Next steps36s
-
- 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.
CancelTake 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.
Share this video
Embed this video
Video: Create the SkiDayCounter component