Now that you have access to the form values, you need to pass them up the component tree to the parent: the app. You can doe this with two-way function binding. Eve adds a new property called onNewDay that passes data back up to the app. The app will use this data to add a day to state. Use the spread operator to push existing days into the new array with the new day added.
- [Narrator] Now that we have access to the form values…we need to pass them up the component tree…to the parent, the App.…We can do this using two-way function binding.…Once we pass the data back up to the App,…we're going to change the state.…So the first place I want to get started with this…is over in our SkiDayRow component.…So we're going to be capturing this date information…from our form so I want to make sure…that we're getting all of the types correct.…So instead of displaying all of these functions,…we're just going to display the date.…
And then we're going to change our propType here…to just a simple string.…And we'll say isRequired to for good measure.…Awesome.…So the next thing I want to do is open our AddDayForm.…And currently we're just logging some values…to our console but we want to actually use these values.…So let's go ahead on line 12…and create a new function here…we're going to call onNewDay.…So onNewDay we're going to send an object.…
And the object is going to have the new values…for resort,…
- 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
Q: This course was updated on 09/19/2017. What changed?
A: The following topics were updated: setting up Chrome tools for React, inspecting React sites, Babel static transpiling with babel-cli, loading JSON with webpack, adding CSS to webpack build, and creating components with createClass(). In addition, a new video was added that covers migrating to webpack 3.
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?
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.