FAQ: Advanced JSX - Keys

Frequently Asked Questions JavaScript FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Keys” exercise from the lesson “Advanced JSX”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn ReactJS: Part I

FAQs on the exercise Keys

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2 
const peopleLis = people.map((person, i) =>
  // expression goes here:
	<li key={"person_" + i}>{person}</li>
);

When dealing with this map() call, how is i getting assigned incremented? What’s it’s default value, and how is it getting that? As I look at this particular call, the only thing that I can see that would make the keys unique is the fact that the ‘person’ name would (hopefully) be.

2 Likes
4

I’d like to know this as well if it isn’t answered in a later lesson.

5

i is the index of the item, person in this case, in the array map is acting on, people in this case. The initial value of i will be the initial index of an array in JavaScript, 0. The handling of i is done behind the scenes for you. Array.map will pass in a number of things into the function you give it you can find them here:

2 Likes
7

I have a question about this piece of code:

key={'person_' + i}

Why is the “person” wrapped in quotation marks, and appended with underscore?

9 Likes
8

Hi, so the lesson isn’t explained well at all but I just read in the forums here that the ‘i’ retrieves the index number of the list. So in the key “Person_” is a string and is joined with the index number, so the keys would come out Person_1, Person_2 etc

4 Likes
9

The key will be a string concatenated from a smaller string of your choice(eg. “person_”) plus an incremented number(eg. i).

So the output there will be a series of elements with keys of “person_1”, “person_2”, “person_3”, etc.

The quotation marks are because it’s just a regular string, and the underscore is - I’m assuming - a convention for human readability.

10

follow up question to what @ tssuf hav asked …
can we use just person instead of string ‘person_’

for example : key={ person + i }

11

I still don’t understand why person is wrapped in quotation marks. I understand that the end result (the key) has to be a string but I don’t understand how it evaluates to “Rowe_0”, “Prevost_1” etc. when you don’t pass it the person variable, you are passing it the “person” string.

12

My question here is, the key’s value might not necessarily be ‘person_’ so why does it give an error when i use a different name. Thank you

13

My understanding is that it won’t evaluate to the values you described, but to:

<ul>
  <li key="person_0">Rowe</li>
  <li key="person_1">Prevost</li>
  <li key="person_2">Gare</li>
</ul>
2 Likes
14

From this lesson, I am understanding when to use keys. I am not understanding how keys work. Will the keys be sort-ordered based on their own alphanumeric ordering of the key name? Or, is it some more complicated mechanism of how the keys will sort?

15

The following short reads may be of interest:

Keys allows React to associate each list item with a unique identifier. This makes it efficient for React to decide whether a list item has changed or whether it is the same.

1 Like
16

Thank you! In repayment, I report back my findings: I was totally misunderstanding the keys. From the second article, it is more clear to me now.

React is not going to sort the elements by their keys for display; React is just going to match keys. Keys are about knowing which DOM element to update.

Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree.

1 Like
17

Quick question: I’ve completed this assignment and it’s marked as correct, but when I inspect the element I note the key isn’t in there:
e.g.

<li>Rowe</li>

Does React do anything fancy like check if I actually need that index and omit it if it’s not then used?