encountered two children with the same key error in react
when two or more elements we map()return from the method have the same key property, we get the react error “ encountered two children with the same key ”. to fix the error, you need to provide a unique value for the key prop of each element or use the index parameter.
look at the following code
const app = () => {
// 👇️ name property is not a unique identifier
const people = [
{id: 1, name: 'alice'},
{id: 2, name: 'bob'},
{id: 3, name: 'alice'},
];
/**
* ⛔️ encountered two children with the same key, `alice`.
* 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.
*/
return (
<div>
{people.map(person => {
return (
<divkey={person.name}><h2>{person.id}h2><h2>{person.name}h2>div>
);
})}
div>
);
};
export default app;
the problem in the code snippet is that we are using name as the key attribute on each object, but the name attribute is not unique across all objects.
one way to work around the error is to use the index, which is map()the second argument passed to the function taken by the method.
const app = () => {
const people = [
{id: 1, name: 'alice'},
{id: 2, name: 'bob'},
{id: 3, name: 'alice'},
];
// 👇️ now using index for key
return (
<div>
{people.map((person, index) => {
return (
<divkey={index}><h2>{person.id}h2><h2>{person.name}h2>div>
);
})}
div>
);
};
export default app;
the function we pass to array.mapthe method is called with each element in the array and the index of the current element being processed.
the index is guaranteed to be unique, but using it for the key attribute is not a best practice because it is unstable and can change between renders.
a better solution is to use a value to uniquely identify each element in the array.
in our example, we can use the id property on the object, since each id is guaranteed to be unique.
const app = () => {
const people = [
{id: 1, name: 'alice'},
{id: 2, name: 'bob'},
{id: 3, name: 'alice'},
];
// ✅ now using the id for the key prop
return (
<div>
{people.map(person => {
return (
<divkey={person.id}><h2>{person.id}h2><h2>{person.name}h2>div>
);
})}
div>
);
};
export default app;
using id as the key attribute is much better because we guarantee that the object with id 1 will always have a name attribute equal to alice.
for performance reasons, react uses
keythe value we pass to the property — to ensure that it only updates list elements that changed between renders.
when each element in an array has a unique key, react can more easily determine which list elements have changed.
we could use
keyan index on the property, but this would likely cause react to do more work behind the scenes instead of using a stable value like a unique id.
having said that, unless you are presenting arrays with thousands of elements, there is a good chance that you will not notice any difference between using an index and a unique identifier.
summarize
when two or more elements we map()return from the method have the same key property, we get the react error "encountered two children with the same key". to resolve the error, provide a unique value for the key prop of each element or use the index parameter.
for reprinting, please send an email to 1244347461@qq.com for approval. after obtaining the author's consent, kindly include the source as a link.
article url：
related articles
export multiple components from a file in react.js
publish date：2025/03/06 views：134 category：react
-
使用命名导出在 react 中导出多个组件，例如 export function a() {} 和 export function b() {} 。 可以使用命名导入导入导出的组件，如 import {a, b} from ./another-file 。 我们可以在单个文件中根据需
publish date：2025/03/06 views：111 category：react
-
当我们将不是函数的值传递给元素的 onclick 属性时，会出现错误 expected onclick listener to be a function 。 要解决该错误，请确保仅将函数传递给元素的 onclick 属性。 const app = () = { // ⛔️
publish date：2025/03/06 views：111 category：react
-
在 react typescript 中将函数作为 props 传递： 在组件的接口中定义函数属性的类型。 在父组件中定义函数。 将函数作为道具传递给子组件。 interface buttonprops { sum : ( a: number , b: number ) =
publish date：2025/03/06 views：143 category：react
-
要使用react.js 创建一个仅包含允许的数字的输入字段： 将输入字段的类型设置为文本。 添加一个删除所有非数字值的 onchange 事件处理程序。 将输入值保存在状态变量中。 import {usest
publish date：2025/03/06 views：136 category：react
-
出现component cannot be used as a jsx component的错误有多种原因： 返回 jsx 元素数组而不是单个元素。 从组件返回 jsx 元素或 null 以外的任何值。 具有过时版本的 react 类型。 下面是一个产生上
publish date：2025/03/06 views：110 category：react
-
在 react 中检查输入值是否为有效数字： 检查输入的值是否不是空字符串或仅包含空格。 将值传递给 isnan() 函数。 如果 isnan 返回 false ，则该值为有效数字。 import {usestate} from react ; f
publish date：2025/03/06 views：185 category：react
-
在 react.js 中检测用户何时按下退格键： 将 onkeydown 道具添加到输入元素。 每次用户在输入字段中按下一个键时，检查按下的键是否为退格键。 调用函数或运行某些逻辑（如果是）。
publish date：2025/03/06 views：136 category：react
-
在 react 中使用内联样式设置背景颜色： 在元素上设置样式 style 属性。 将 backgroundcolor 属性设置为特定颜色。 import {usestate} from react ; export default function app () { const [isactive, setisactive] =
publish date：2025/03/06 views：168 category：react
-
react.js 错误 x is not defined react/jsx-no-undef 发生在我们忘记在代码中导入函数、类或变量之前使用它。 要解决该错误，请确保在我们的代码中使用之前导入该值，例如 import {myfunc} from my-
