Breaking News: Grepper is joining You.com. Read the official announcement!

How to give JSX list's keys unique value using .map()?

M Hassan khan answered on June 11, 2022 Popularity 8/10 Helpfulness 4/10

answer How to give JSX list's keys unique value using .map()?

How to give JSX list's keys unique value using .map()?

Comment

/*
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:
*/


key={'person_' + i}
const people = ["Rowe", "Prevost", "Gare"];
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>: 
*/
  <li key={'person_'+i}>{person}</li>
));

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript jsx unique using

Link to this answer
Share Copy Link

Contributed on Jun 11 2022

M Hassan khan

0 Answers Avg Quality 2/10

How to give JSX list's keys unique value using .map()?

Contents

More Related Answers

How to give JSX list's keys unique value using .map()?

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.