---
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: "ReactJS | useCallback Hook with Example"
url: "https://magecomp.com/blog/reactjs-usecallback-hook-with-example/"
- title: "How to Implement Multi-Language in React?"
url: "https://magecomp.com/blog/implement-multi-language-react/"
- title: "What is Prop Drilling in ReactJS?"
url: "https://magecomp.com/blog/prop-drilling-reactjs/"
---
# Understanding ReactJS Keys with Component
_Published: June 7, 2023_
_Author: Bharat Desai_
**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.
[](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} ;
});
```
## [](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 elements in the array, not to the 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 (
Correct Key Usage Example
{listItems}
);
}
const sportsLists = [ 'Cricket', 'Football', 'Vollyball', ‘Baseball' ];
ReactDOM.render(
,
document.getElementById('app')
);
export default App;
```
## [](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-08-05 06:12:21 UTC_