---
title: "Understanding ReactJS Keys with Component"
url: "https://magecomp.com/blog/reactjs-keys-with-component/"
date: "2023-06-07T17:36:51+00:00"
modified: "2025-02-27T09:07:12+00:00"
author:
  name: "Bharat Desai"
  url: "https://magecomp.com"
categories:
  - "ReactJS"
word_count: 447
reading_time: "3 min read"
summary: "Hello ReactJS Friends,"
description: "The key is a unique identifier in react it is used to identify which items have changed, deleted, or updated. Learn more about keys in ReactJS."
keywords: "ReactJS"
language: "en"
schema_type: "Article"
related_posts:
  - title: "What is Prop Drilling in ReactJS?"
    url: "https://magecomp.com/blog/prop-drilling-reactjs/"
  - title: "Beginner&#8217;s Guide: Learn the Basics of ReactJS"
    url: "https://magecomp.com/blog/basics-of-reactjs/"
  - title: "ReactJS | Passing Props to a Component"
    url: "https://magecomp.com/blog/reactjs-passing-props-to-a-component/"
---

# Understanding ReactJS Keys with Component

_Published: June 7, 2023_  
_Author: Bharat Desai_  

![Understanding ReactJS Keys with Component](https://magecomp.com/blog/wp-content/uploads/2023/06/Understanding-ReactJS-Keys-with-Component-1024x512.webp)

**Hello ReactJS Friends,**

In this blog, we will learn ReactJS keys with examples.
In ReactJS, a key is used to give a unique identifier to each element in an array or iterable object when rendering a list of components. Key helps React efficiently update and reorder the elements in the list by providing a way to distinguish between items.
[![React js](https://magecomp.com/blog/wp-content/uploads/2025/02/React-js-CTA-1.webp)](https://magecomp.com/hire-reactjs-developer.html)

The key should be assigned to the top-level JSX element produced by the array mapping function. It should be a string or a number and must be unique among siblings. Using a stable and unique identifier, such as an ID from your data source, is recommended rather than using an index as the key value.
**Learn –** [**Basics of ReactJS Keys**](https://magecomp.com/blog/reactjs-lists-and-keys/)

Using the key prop correctly helps React efficiently update and reorder the list when necessary. It is useful when we dynamically create components or when the users are after the lists. It’s especially important when working with dynamic lists, as it allows React to optimize the rendering process and provide better performance.
```
const sportsLists = [ 'Cricket', 'Football', 'Vollyball', ‘Baseball' ];

const updatedLists = sportsLists.map((sports)=>{
     {sports} ;
});
```

In the above example, we have no ID so we can assign the item’s index as a key list like below
```
const sportsLists = [ 'Cricket', 'Football', 'Vollyball', ‘Baseball' ];

const updatedLists = sportsLists.map((sports, index)=>{
     {sports} ;
});
```

## [![React js](https://magecomp.com/blog/wp-content/uploads/2025/02/React-js-CTA-2.webp)](https://magecomp.com/services/contact-us/)

## Using Keys with Component
Consider you have created a separate component for ListItem and extracted ListItem from that component. In this case, you should have to assign keys to the <ListItem /> elements in the array, not to the <li> elements in the ListItem itself. To avoid mistakes, you must remember that keys only make sense in the context of the surrounding array. So, anything you are returning from the map() function is recommended to be assigned a key.
```
import React from 'react';
import ReactDOM from 'react-dom';

function ListItem(props) {
 const item = props.item;
 return (
 // No need to specify the key here.
  {item}
 );
}
function NameList(props) {
 const sportsLists = props.sportsLists;
 const listItems = sportsLists.map((strLists) =>
 // The key should have been specified here.

 );
 return (

 <h2>Correct Key Usage Example</h2>
 <ol>{listItems}</ol>

 );
}
const sportsLists = [ 'Cricket', 'Football', 'Vollyball', ‘Baseball' ];

ReactDOM.render(
 <NameList sportsLists={sportsLists}/>,
 document.getElementById('app')
);
export default App;
```

## [![React js](https://magecomp.com/blog/wp-content/uploads/2025/02/React-js-CTA-3.webp)](https://magecomp.com/hire-reactjs-developer.html)

## Conclusion:
Hope you understand ReactJS Keys using Component. Share the article with your friends, and stay in touch with us to learn more about ReactJS.
**Happy Coding!**


---

_View the original post at: [https://magecomp.com/blog/reactjs-keys-with-component/](https://magecomp.com/blog/reactjs-keys-with-component/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-03-08 02:03:11 UTC_  
