In this video, Eve enhances the Activity Counter by adding an Autocomplete component to the form. This replaces the input that currently takes in resorts. Create a dataset as an array and map over that to create options in a datalist. This autocomplete functionality adds a lot of pizzazz to the application.
- [Instructor] We have our Ski Day Counter…adding new days appropriately,…so now all of the data is being represented in our list,…as well as in our component.…So now that it's working well,…let's go ahead and add a few enhancements.…We're going to add an autocomplete component…and then we're going to add an image, just for fun.…So, we're going to start with our add day form file…and I've already added this array here.…It's some data for our Tahoe resorts.…So this is going to be the data…that will autopopulate into the resort field.…
So instead of just being an input field,…this is going to be a data list…that will allow us to select from many options.…So these are our options.…We're going to create our autocomplete component now,…as a class.…So, we'll create it all in the same file,…just because these are pretty tied together.…You could create a new file if you wanted to though.…So we're going to say autocomplete extends component.…We will make sure to also use component on line one,…import it here.…
And our render method inside of autocomplete…
- 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.