FAQ: Advanced JSX - Keys

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!

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.

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

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:

1 Like

I have a question about this piece of code:

key={'person_' + i}

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

4 Likes

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