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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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.  
  • {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:

    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    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.

    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    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.  
    
  • {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:

    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    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:

    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    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) =>
    1. {show.name}
    2. )}
    ); 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:

    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    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!!