CODEWITHSUNDEEP
javascriptreactjs
Rodrigo Dias
Rodrigo Dias

Reputation: 177

How can I resolve "Warning: Encountered two children with the same key" on React.js

I'm trying to consume the data from an api, but when I try to render the data, I get this error:

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.

Here is a prototype in CodeSandbox ... Probably it's a simple thing to solve, but I started to study the react a few days ago. Can you help me?

Upvotes: 5

Views: 27958

Answers (5)

Shivo'ham
Shivo'ham

Reputation: 3062

Change

<h2 key={movie.toString()}>{movie.title}</h2>

to

<h2 key={movie.id}>{movie.title}</h2>

Upvotes: 1

tayfun Kılı&#231;
tayfun Kılı&#231;

Reputation: 2834

The Problem 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.

render() {
return (
    <div>
        {this.state.users.map(user => (
            <UserComponent user={user} key={user} />
        ))}
    </div>
)

}

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

render() {
return (
    <div>
        {this.state.users.map((user, 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.

render() {
return (
    <div>
        {this.state.users.map((user, idx) => (
            <UserComponent user={user} key={user.id} />
        ))}
    </div>
)

}

https://sentry.io/answers/defining-proper-key-in-props/

Upvotes: 2

Leftium
Leftium

Reputation: 17903

Change

<h2 key={movie.toString()}>{movie.title}</h2>

to

<h2 key={movie.id}>{movie.title}</h2>

Explanation:

React expects a unique key for each row of a list-like component. It uses this key to determine what changed since the last render. Otherwise it might be ambiguous how the list changed.

movie.toString() was not unique. It was evaluating to "[object Object]" for every row.

Looking at the API you are calling, you might actually have to do something more like this:

<h2 key={movie.event.id}>{movie.event.title}</h2>

Upvotes: 6

Utsav Patel
Utsav Patel

Reputation: 2889

If you are rendering any list in react, your each component must have a unique identifier as key.

In your pages -> main -> index.js

You have this 

{this.state.movies.map(movie => {
      return <h2 key={movie.toString()}>{movie.title}</h2>;
    })}

Here you need to pass something unique to key instead of movie.toString().

Read about keys here

Upvotes: 0

Djellal Mohamed Aniss
Djellal Mohamed Aniss

Reputation: 1733

well that's a ReactJS property, when you map on an array to create a list of components ( like you"re doing on your pages/main/index.js to generate h2 ) your key should be unique,and i think that there you"re fetching a movie 2 times ( or more ) which makes the key not unique ( cause you're using the movie name as a key ), so to avoid the problem, try to use the map loop index instead, it's better.

{this.state.movies.map(( movie , index )  => (
          <h2 key={index}>{movie.title}</h2>
))}

Upvotes: 0

Related Questions