Understanding ReactJS Keys with Component

Hello ReactJS Friends,

In this blog, we will learn ReactJS keys with examples.

In ReactJS, a key is used to give a unique identifier to each element in an array or iterable object when rendering a list of components. Key helps React efficiently update and reorder the elements in the list by providing a way to distinguish between items.

The key should be assigned to the top-level JSX element produced by the array mapping function. It should be a string or a number and must be unique among siblings. Using a stable and unique identifier, such as an ID from your data source, is recommended rather than using an index as the key value.

Learn – Basics of ReactJS Keys

Using the key prop correctly helps React efficiently update and reorder the list when necessary. It is useful when we dynamically create components or when the users are after the lists.  It’s especially important when working with dynamic lists, as it allows React to optimize the rendering process and provide better performance.

const sportsLists = [ 'Cricket', 'Football', 'Vollyball', ‘Baseball' ];   

const updatedLists = sportsLists.map((sports)=>{   
    <li key={sports.id}> {sports} </li>;   
});

In the above example, we have no ID so we can assign the item’s index as a key list like below

const sportsLists = [ 'Cricket', 'Football', 'Vollyball', ‘Baseball' ];   

const updatedLists = sportsLists.map((sports, index)=>{   
    <li key={index}> {sports} </li>;   
});

Using Keys with Component

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

import React from 'react'; 
import ReactDOM from 'react-dom'; 
 
function ListItem(props) { 
 const item = props.item; 
 return ( 
 // No need to specify the key here. 
 <li> {item} </li> 
 ); 
} 
function NameList(props) { 
 const sportsLists = props.sportsLists; 
 const listItems = sportsLists.map((strLists) => 
 // The key should have been specified here. 
 <ListItem key={sportsLists.toString()} item={strLists} /> 
 ); 
 return ( 
 <div> 
 <h2>Correct Key Usage Example</h2> 
 <ol>{listItems}</ol> 
 </div> 
 ); 
} 
const sportsLists = [ 'Cricket', 'Football', 'Vollyball', ‘Baseball' ];   

ReactDOM.render( 
 <NameList sportsLists={sportsLists}/>, 
 document.getElementById('app') 
); 
export default App;

Conclusion:

Hope you understand ReactJS Keys using Component. Share the article with your friends, and stay in touch with us to learn more about ReactJS.

Happy Coding!