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;
</citynames></citylist>
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;
</citynames></citylist>
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.
Incorrect Key Usage
- {cityname}
Output:
1. Jaipur
2. Jodhpur
3. Udaipur
4. Pune
5. Chandigarh
1. Jaipur
2. Jodhpur
3. Udaipur
4. Pune
5. Chandigarh
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.
<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')
</citynames></citylist>
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')
</citynames></citylist>
function CityList(props) { const city = props.city; return ( //Specifying the key here is a wrong practice.
Correct Key Usage
- {cityname}
Output:
1. Jaipur
2. Jodhpur
3. Udaipur
4. Pune
5. Chandigarh
1. Jaipur
2. Jodhpur
3. Udaipur
4. Pune
5. Chandigarh
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 = (
<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;
</menulist>
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;
</menulist>
import React from 'react'; import ReactDOM from 'react-dom'; function Menulist(props) { const Names = ({props.info.map((show) =>
); const remark = props.info.map((show) =>- {show.name}
)}); return ({show.name}: {show.remark}
{name}); } const info = [ {id: 10, name: 'Joy', remark: 'Good!!'}, {id: 20, name: 'Happy', remark: 'Excellent!!'}, {id: 30, name: 'Smiley', remark: 'Keep Going!!'} ]; ReactDOM.render(
{remark}, document.getElementById('app') ); export default App;
Output:
10. Joy
20. Happy
30. Smiley
Joy: Good!!
Happy: Excellent!!
Smiley: Keep Going!!
10. Joy
20. Happy
30. Smiley
Joy: Good!!
Happy: Excellent!!
Smiley: Keep Going!!
10. Joy 20. Happy 30. Smiley Joy: Good!! Happy: Excellent!! Smiley: Keep Going!!