How do you give keys in React

Add Your Heading Text Here

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.  
<li key={city.toString()}>  
{city}  
</li>  
);  
}  
function CityNames(props) {  
const citylist = props.citylist;  
const cityname = citylist.map((strLists) =>  
// Specifying the key here is a right practice.  
<CityList city={strLists} />  
);  
return (  
<div>  
<h2>Incorrect Key Usage</h2>  
<ol>{cityname}</ol>  
</div>  
);  
}  
const citylist = ['Jaipur', 'Jodhpur', 'Udaipur', 'Pune', 'Chandigarh'];      
ReactDOM.render(  
<CityNames citylist={citylist}/>,  
document.getElementById('app')  
);  
export default App;

Example: Correct usage of the Key.

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

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 = (  
<ol>  
{props.info.map((show) =>  
<li key={show.id}>  
{show.name}  
</li>  
)}  
</ol>  
);  
const remark = props.info.map((show) =>  
<div key={show.id}>  
<h3>{show.name}: {show.remark}</h3>      
</div>  
);  
return (  
<div>  
{name}  
<hr />  
{remark}  
</div>  
);  
}  
const info = [  
{id: 10, name: 'Joy', remark: 'Good!!'},  
{id: 20, name: 'Happy', remark: 'Excellent!!'},  
{id: 30, name: 'Smiley', remark: 'Keep Going!!'}  
];  
ReactDOM.render(  
<Menulist info={info} />,  
document.getElementById('app')  
);  
export default App;