Sentry Answers>React>

Encountered Two Children with the Same Key — React Fix

Encountered Two Children with the Same Key — React Fix

Evan Hicks

The ProblemJump To Solution

When you are rendering React components in a map function inside the render function, you must provide a key prop to each component that is unique, otherwise React will put a warning in the console and may or may not correctly update your component when it rerenders. One of the most common mistakes is using an object as the key. An object will get stringifyed by React into [object Object] regardless of the specifics of the object you passed in. So two completely different objects will have the same key. If this happens you will see something like a warning like the following in the console:

Warning: Encountered two children with the same key, [object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Click to Copy
render() { return ( <div> { => ( <UserComponent user={user} key={user} /> ))} </div> ) }

Another common mistake is to use array indexes for the keys.

Click to Copy
render() { return ( <div> {, idx) => ( <UserComponent user={user} key={idx} /> ))} </div> ) }

The Solution

A key prop should be unique, stable and reproducible.

Unique: The key for an element should be unique amongst its siblings. The key does not need to be globally unique. This is the problem with using the object for a key, since the string form of any object is always the same.

Stable: The key for a certain element should always be the same. This is why using the array indexes can cause errors. If user ABC is at index 0, and then gets moved to index 1, the component will not rerender because the keys are the same, even though the data connected to those keys has changed.

Reproducible: It should always be possible to get the same key for the object every time. Generally this means to not use random values for keys.

The best practice in situations like this is to use the unique ID backing your objects. In this example, the user’s ID that would have been stored in the database. However it’s possible to use other hashing functions to get similar results.

Click to Copy
render() { return ( <div> {, idx) => ( <UserComponent user={user} key={} /> ))} </div> ) }

Further Reading

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

  • Syntax.fmReact Server Components
  • Sentry BlogFixing memoization-breaking re-renders in React
  • 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.


Loved by over 4 million developers and more than 90,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.