The application currently has days being listed. Add the functionality of an Add Day form so that new days can be added to the list. Eve shows how to create a form and use React specific attributes like defaultValue and defaultChecked. Eventually, this form will be used to pass back information to a parent component.
- [Instructor] We stopped at our AddDayForm…in a previous video,…but we never really put together the form…that makes up this page.…Let's go ahead and do this now,…so that we can collect values…for resort, date, powder, and backcountry,…and add them to our list.…So, in our AddDayForm, I've already…added these propTypes for you for AddDayForm.…We're going to be collecting, as I said,…resort, date, powder, and backcountry,…and we're importing propTypes from react.…Now, the next thing that I want to do here…is I want to replace our AddDayFrom with a class component.…
So class AddDayForm extends Component,…and we'll make sure that we import component from react.…Now, what we want to render here is our form.…So let's return a form.…And the form should have a class name of add-day-form.…Now, within our form, we're going to add…a few different inputs.…So our first input will be…the text field for resort.…
So we're going to give it an ID of resort,…a type of text, and then we can give it…the attribute required.…So, this is an HTML 5 attribute…
- 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?
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.