Learn about React's key property, how to deal with the asynchronicity of data using componentDidMount and the component state.
- [Instructor] You might have noticed…that we're actually getting a warning from React…in our current code.…This is because of our dynamic array mapping here.…Every time you display a list of things dynamically,…React needs a little bit of help.…It needs you to identify every element with a key.…This key helps React identify the element…when this array of children changes.…So we can simply use the id for every contest in this key.…contest.id.…And let's go ahead and test.…Now that warning is gone.…
So just remember, every time you have a map call,…you need to provide a unique key…to identify the child element inside that map.…One bit of advice here.…Do not use the array index as a unique key.…Try and find another unique key…to identify an element in an array.…In our case, our data had an ID.…And usually an API data…is going to give you an ID for every object,…so just use that.…Now we have a React component…that renders an array of contests.…And we have the data,…which we're reading into memory directly…before rendering the React application.…
- Configuring webpack and Babel
- Working with native Node modules
- Creating an Express server
- Working with React components and JSX
- Loading and working with test mock data
- Fetching data from a remote API
- Working with data in MongoDB
- Isomorphic rendering on the server
- Front-end routing and back-end routing
Skill Level Advanced
Building a Website with Node.js and Express.jswith Ray Villalobos3h 16m Intermediate
MEAN Stack and MongoDB: Development Techniqueswith Alexander Zanfir1h 48m Intermediate
1. Getting Started
2. Node as a Web Server
3. React Basics
4. Working with Data
5. Rendering on the Server
Fix the checksum problem6m 11s
6. Routing on Client and Server
7. Working with MongoDB
- 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.