TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

React Keys

React Keys with ReactJS Tutorial, ReactJS Introduction, ReactJS Features, ReactJS Installation, Pros and Cons of ReactJS, AngularJS vs ReactJS, Reactnative vs ReactJS, ReactJS Router, ReactJS Flux Concept, ReactJS Animations, ReactJS Discussion, ReactJS Quick Guide, etc.

<< Back to REACT

React Keys

A key is a unique identifier. In React, it is used to identify which items have changed, updated, or deleted from the Lists. It is useful when we dynamically created components or when the users alter the lists. It also helps to determine which components in a collection needs to be re-rendered instead of re-rendering the entire set of components every time.

Keys should be given inside the array to give the elements a stable identity. The best way to pick a key as a string that uniquely identifies the items in the list. It can be understood with the below example.

Example

const stringLists = [ 'Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa' ]; 
  
const updatedLists = stringLists.map((strList)=>{ 
    
  •  {strList} 
    • ; 
});

    If there are no stable IDs for rendered items, you can assign the item index as a key to the lists. It can be shown in the below example.

    Example

    const stringLists = [ 'Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa' ]; 
  
const updatedLists = stringLists.map((strList, index)=>{ 
    
  •  {strList} 
    • ; 
});

    Note: It is not recommended to use indexes for keys if the order of the item may change in future. It creates confusion for the developer and may cause issues with the component state.

    Using Keys with component

    Consider you have created a separate component for ListItem and extracting ListItem from that component. In this case, you should have to assign keys on the <ListItem /> elements in the array, not to the <li> elements in the ListItem itself. To avoid mistakes, you have to keep in mind that keys only make sense in the context of the surrounding array. So, anything you are returning from map() function is recommended to be assigned a key.

    Example: Incorrect Key usage

    import React from 'react'; 
import ReactDOM from 'react-dom'; 

function ListItem(props) {
  const item = props.item;
  return (
    // Wrong! No need to specify the key here.
    
  • 
      {item}
    
    • 
  );
}
function NameList(props) {
  const myLists = props.myLists;
  const listItems = myLists.map((strLists) =>
    // The key should have been specified here.
    
  );
  return (
	
    
		
    Incorrect Key Usage Example
    

    
    	      
      {listItems}
    
	
    
  );
}
const myLists = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];
ReactDOM.render(
  ,
  document.getElementById('app')
);
export default App;

    In the given example, the list is rendered successfully. But it is not a good practice that we had not assigned a key to the map() iterator.

    Output

    React Keys

    Example: Correct Key usage

    To correct the above example, we should have to assign key to the map() iterator.

    import React from 'react'; 
import ReactDOM from 'react-dom'; 

function ListItem(props) {
  const item = props.item;
  return (
    // No need to specify the key here.
    
  •  {item} 
    • 
  );
}
function NameList(props) {
  const myLists = props.myLists;
  const listItems = myLists.map((strLists) =>
    // The key should have been specified here.
    
  );
  return (
	
    
		
    Correct Key Usage Example
    

    
            
      {listItems}
    
	
    
  );
}
const myLists = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];
ReactDOM.render(
  ,
  document.getElementById('app')
);
export default App;

    Output

    React Keys

    Uniqueness of Keys among Siblings

    We had discussed that keys assignment in arrays must be unique among their siblings. However, it doesn't mean that the keys should be globally unique. We can use the same set of keys in producing two different arrays. It can be understood in the below example.

    Example

    import React from 'react'; 
import ReactDOM from 'react-dom'; 
function MenuBlog(props) {
  const titlebar = (
    
      
      {props.data.map((show) =>
        
    1. 
          {show.title}
        
      2. 
      )}
    
    
  );
  const content = props.data.map((show) =>
    
    
      
    {show.title}: {show.content}
        
    
    
  );
  return (
    
    
      {titlebar}
      
    
      {content}
    
    
  );
}
const data = [
  {id: 1, title: 'First', content: 'Welcome to JavaTpoint!!'},
  {id: 2, title: 'Second', content: 'It is the best ReactJS Tutorial!!'},
  {id: 3, title: 'Third', content: 'Here, you can learn all the ReactJS topics!!'}
];
ReactDOM.render(
  ,
  document.getElementById('app')
);
export default App;

    Output

    React Keys
    Next TopicReact Refs




    Related Links:

    .Net

    .NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

    Java

    Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

    Related Links

    Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf