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) =>
    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:

    10. Joy
    20. Happy
    30. Smiley
    
    Joy: Good!!
    Happy: Excellent!!
    Smiley: Keep Going!!