Sentry Answers>JavaScript>

Warning: Each Child in a List Should Have a Unique 'key' Prop

Warning: Each Child in a List Should Have a Unique 'key' Prop

Nisanthan Nanthakumar

The ProblemJump To Solution

Click to Copy
Warning: Each child in a list should have a unique "key" prop
Click to Copy
<ul> {["Item1", "Item2", "Item3"].map(item => <li>{item}</li> )} </ul>

The Solution

When creating a list in the UI from an array with JSX, you should add a key prop to each child and to any of its’ children.

Ex: <li key="uniqueId1" >Item1</li>

React uses the key prop create a relationship between the component and the DOM element. The library uses this relationship to determine whether or not the component should be re-rendered.

It is not recommended to use the index of the array as the key prop if you know the array will not be static. If the key is an index, reordering an item in the array changes it. Then React will get confused and re-render the incorrect element.

Keys do not have to be unique globally. They just need to be unique across sibling elements.

Click to Copy
<ul> {["Item1", "Item2", "Item3"].map(item => <li key="{item}">{item}</li> )} </ul>

Further Reading

If you’re looking to get a deeper understanding of how JavaScript application monitoring works, take a look at the following articles:

  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • SentryJavascript Error Monitoring & Tracing
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.