Learn

When you make a list in JSX, sometimes your list will need to include something called keys:

<ul>
  <li key="li-01">Example1</li>
  <li key="li-02">Example2</li>
  <li key="li-03">Example3</li>
</ul>

A key is a JSX attribute. The attribute’s name is key. The attribute’s value should be something unique, similar to an id attribute.

keys don’t do anything that you can see! React uses them internally to keep track of lists. If you don’t use keys when you’re supposed to, React might accidentally scramble your list-items into the wrong order.

Not all lists need to have keys. A list needs keys if either of the following are true:

The list-items have memory from one render to the next. For instance, when a to-do list renders, each item must “remember” whether it was checked off. The items shouldn’t get amnesia when they render.
A list’s order might be shuffled. For instance, a list of search results might be shuffled from one render to the next.

If neither of these conditions are true, then you don’t have to worry about keys. If you aren’t sure then it never hurts to use them!

Instructions

On line 8, give your <li></li> a key attribute.

What should key‘s value be?

Each key must be a unique string that React can use to correctly pair each rendered element with its corresponding item in the array.

So, for each element in people, we must generate a unique value. How can you get .map() to produce unique keys?

First, add an i parameter to .map()‘s inner function, so that you can access each person’s unique index:

const peopleLIs = people.map((person, i) =>

Now, you can get a unique key on each loop, by adding the following attribute to your <li></li>:

key={'person_' + i}

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?