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?

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?

• javascript
• reactjs

• I would be helpful to see your code, especially the part where you add the key attribute to what looks like a div element. As the warning message implies, React will only allow unique values as key, so you will get this message if you try and store the same key value on more than one child element. – JSONaLeo Commented Feb 23, 2019 at 16:41
• Please read how to ask and update your question accordingly. You should have a minimal reproduction case, in code, that we can copy-paste, in your question. As it stands, your question is likely to be closed. – Jared Smith Commented Feb 23, 2019 at 16:44

5 Answers 5

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>

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/

Change

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

to

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

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>
))}

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