This video looks at how to add keys to fragments to ensure that all of the child elements are being rendered appropriately. Learn how to use React.Fragment in all of your React apps.
- [Instructor] In the last video we looked at fragments…and how these can be used to return multiple elements.…Let's take a look at another example where we'll render…items from an array.…So here's some data for a list of skiing and snowboarding…related definitions.…We're going to pass this data down to the app component…via props.…So here in line 42 we'll just pass this to the app…component as props, skiDictionary equals skiDictionary.…Then we'll put together our component.…
We're going to create a description list, a description…list is an HTML tag that describes a list of terms.…So let's go ahead and adjust our app component, we'll no…longer be rendering this header, but instead we're…going to take in props and we're going to return…the following, so let's get rid of these tags.…We're going to return a definition list DL…and the definition list should wrap around a mapping…of props, so we'll say props.skiDictionary.map.…
We're going to take in a term and for each one of these…terms we should return two tags, so DT again…
- What's new in React 16
- Rendering arrays
- Controlled, uncontrolled, and compound components
- Using keyed fragments
- Working with new lifecycle methods
- React patterns
- Using the context API
- Checking for accessibility issues in your React code
Skill Level Advanced
1. What’s New in React
2. Advanced Components
3. Enhanced Components
4. React Patterns
5. React Accessibility
- 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.