Keys in ReactJS

React Keys A key is a unique identifier which is used to identify which items have changed, updated, or deleted from the Lists and to determine which components in a collection needs to be re-rendered.

Using Keys with the component:

Example: Incorrect usage of the Key.

import React from 'react';   
import ReactDOM from 'react-dom';   
function CityList(props) {  
const city = props.city;  
return (  
//Specifying the key here is a wrong practice.  
  
{city}  
  
);  
}  
function CityNames(props) {  
const citylist = props.citylist;  
const cityname = citylist.map((strLists) =>  
// Specifying the key here is a right practice.  
  
);  
return (  
  
Incorrect Key Usage  
{cityname}  
  
);  
}  
const citylist = ['Jaipur', 'Jodhpur', 'Udaipur', 'Pune', 'Chandigarh'];      
ReactDOM.render(  
,  
document.getElementById('app')  
);  
export default App;

Output:

1. Jaipur
2. Jodhpur
3. Udaipur
4. Pune
5. Chandigarh

Example: Correct usage of the Key.

function CityList(props) {  
const city = props.city;  
return (  
//Specifying the key here is a wrong practice.  
 {city}   
);  
}  
function CityNames(props) {  
const citylist = props.citylist;  
const cityname = citylist.map((strLists) =>  
// Specifying the key here is a right practice.  
  
 );  
return (  
  
Correct Key Usage  
{cityname}  
  
);  
}  
const citylist = ['Jaipur', 'Jodhpur', 'Udaipur', 'Pune', 'Chandigarh'];      
ReactDOM.render(  
,  
document.getElementById('app')

Output:

1. Jaipur
2. Jodhpur
3. Udaipur
4. Pune
5. Chandigarh

The uniqueness of Keys among Siblings:

In an array, the keys assignment must be unique among their siblings. However, we can use the same set of keys in producing two different arrays.

Example:

import React from 'react';   
import ReactDOM from 'react-dom';   
function Menulist(props) {  
const Names = (  
  
{props.info.map((show) =>  
  
{show.name}  
  
)}  
  
);  
const remark = props.info.map((show) =>  
  
{show.name}: {show.remark}      
  
);  
return (  
  
{name}  
  
{remark}  
  
);  
}  
const info = [  
{id: 10, name: 'Joy', remark: 'Good!!'},  
{id: 20, name: 'Happy', remark: 'Excellent!!'},  
{id: 30, name: 'Smiley', remark: 'Keep Going!!'}  
];  
ReactDOM.render(  
,  
document.getElementById('app')  
);  
export default App;

Output:

10. Joy
20. Happy
30. Smiley

Joy: Good!!
Happy: Excellent!!
Smiley: Keep Going!!

Please follow and like us: