Each child in a list should have a unique key prop

The Warning: Each child in a list should have a unique ”key" prop happens in react when we create a list of elements without a key for each element. React use this unique key mainly for performance improvements. Keys must be unique across all siblings. We can use either an id property on the passed object or use the auto-assigning unique keys. 

The id property of the object as a unique key

We can set the id property of the object as a unique key.

 export default function App() {
  const posts = [
    { id: 1, title: "First Post"},
    { id: 2, title: "Second Post" },
    { id: 3, title: "Third Post" }
  ];

  return (
    <div>
    	<ul>
    		{posts.map(post => 
    			<li key={post.id}>{post.title}</li>
    		)}
    	</ul>
    </div>
  );
}

In the above example, we use the id property of the post object as a key for <li>.

{posts.map(post => 
    <li key={post.id}>{post.title}</li>
)}

 

Auto-assigning unique keys

import React from 'react';

export default function App() {
	const posts = [
	  { id: 1, title: "First Post"},
	  { id: 2, title: "Second Post" },
	  { id: 3, title: "Third Post" }
	];
  
	return (
	  <div>
		  <ul>
			{React.Children.toArray(
				posts.map(( post ) => <li>{post.title}</li>)
			)}
		  </ul>
	  </div>
	);
  }

React.Children.toArray method is a better solution to fix this issue.

React.Children.toArray() returns the children opaque data structure as a flat array with keys assigned to each child. The function toArray prefixes each key in the returned array so that each element’s key is scoped to the input array containing it.

 

Why each element in a list should have a unique key?

React use this unique key to identify each element in a list uniquely. Unique keys are important for performance improvements. When we insert, delete or update the list, React re-renders the array elements. In this case, React uses the key to identify each item. Therefore, React only re-renders where modification is needed and, no re-rendering happens to existing items. The key should be unique and remain the same during each re-render. Random numbers should never be assigned as keys.

Read how React reconciliation works.

Why an index of the array as the key prop is not recommended?

In the below example, we use the index of the array as a key for child elements. 

{posts.map((post, index) => 
    <li key={index}>{post.title}</li>
)}

This solution is not recommended for arrays that perform inserting, deleting, or sorting the items. Because the key should remain the same during each re-render. When we reorder items in an array, the index of items may get changed. Then React will get confused and re-render the incorrect element.

Related Blogs

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

The tag is unrecognized in this browser

Warning: The tag is unrecognized in this browser

Warning "The tag is unrecognized in this browser" occurs when the tag doesn't exist in the browser or when we render a component starting with a lowercase letter.

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.

Pass event and parameter onClick in React

How to pass event and parameter onClick in React

We set the inline arrow function (event) => clickHandler(event, "Hello World!") as props to the onClick event handler in the button. The arrow function takes the event as an argument and calls the clickHandler function.

Create a Back button with React Router

Create a Back button with React Router

To create a back button with React Router use useNavigate() hook. Call navigate function eg. navigate(-1); inside the onClick function of the back button.

Call multiple functions onClick in React

Call multiple functions onClick in React

To call multiple functions onClick in React, pass an event handler function into the onClick prop of the element that can call as many other functions as necessary.