From the course: React: Components, Context, and Accessibility

Unlock the full course today

Join today to access over 24,800 courses taught by industry experts.

Using keyed fragments

Using keyed fragments - React.js Tutorial

From the course: React: Components, Context, and Accessibility

Start my 1-month free trial Buy for my team

Using keyed fragments

“

- [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.…

Contents