Pass state down to child components by assigning state as props. App is the parent of the application and it renders the SkiDayList and the SkiDayCount. Eve sends down days as a property using this.state.allSkiDays. That way, the parent and child components can share data and keep information in sync.
- [Lecturer] Let's pass down our state data…as properties to our child components.…We're going to use the App component…to render SkiDayList and SkiDayCount.…So we need to Import both of those from…the Components folder.…So we're going to Import, SkiDayList…from ./SkiDayList and then we'll Import SkiDayCount…from its file, excellent.…
The next thing I want to do is scroll down…a little bit to our Render method.…Now the Render method is currently rendering…this JSX expression.…We're going to replace this with the components…that we'd like to render.…The first one of this is SkiDayList…and the second one is of course, is SkiDayCount.…Now, the SkiDayList has a property of days.…We've set this up before as this array of objects.…Now that we're holding all of these SkiDays…and state, we can pass down the state data…to the SkiDayList as props.…
So we're going this set this equal to this.state.allSkiDays.…Cool, we also want to set up our properties…for SkiDayCount which are Total…and we'll just set this equal…to an empty set of curly braces,…
- Refactoring elements with JSX
- Transpiling with Babel
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Setting up routes
- Nesting routes
- Creating forms
- Understanding the component life cycle
Skill Level Intermediate
Building an App with React.js and MeteorJSwith Emmanuel Henri4h 20m Intermediate
Building a Polling App with Socket IO and React.jswith Alex Banks3h 56m Intermediate
1. What Is React.js?
2. Intro to JSX and Babel
3. React Components
4. Props and State
5. Using the React Router
6. Forms and Refs
7. The Component Lifecycle
Next steps1m 4s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
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.