React Keys | How to use React Keys

React Keys are useful when working with dynamically created components or when editing a list by the user. Setting the key value uniquely identifies the component even after modification.

It also helps determine which components in a collection need to be re-rendered instead of re-rendering the entire set of components each time.

Keys must be specified in the field for elements to have stable IDs. We recommend choosing the key as a string that uniquely identifies an item in the list.

Example

const stringLists = [ 'Student1', 'Student2, 'Student3', 'Student4', 'Student5' ];   
    
const updatedLists = stringLists.map((strList)=>{   
    <li key={strList.id}> {strList} </li>;   
});   

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.

const stringLists = [ 'Student1', 'Student2, 'Student3', 'Student4', 'Student5' ];   
    
const updatedLists = stringLists.map((strList, index)=>{   
    <li key={index}> {strList} </li>;   
});  

Using Keys

Let’s dynamically create a content item with a unique index (i). The map function creates three elements from the data array. Since the value of the key must be unique for each element, we also assign it as a key to each element created.

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 the map() function is recommended to be assigned a key.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data:[
            {
               component: 'First...',
               id: 1
            },
            {
               component: 'Second...',
               id: 2
            },
            {
               component: 'Third...',
               id: 3
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <div>
               {this.state.data.map((dynamicComponent, i) => <Content 
                  key = {i} componentData = {dynamicComponent}/>)}
            </div>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <div>{this.props.componentData.component}</div>
            <div>{this.props.componentData.id}</div>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Output

First….
1
Second….
2
Third….
3

If we add or remove some elements in the future or change the order of the dynamically created elements, React will use the key values to keep track of each element.

Also read | React Lists | How to work with Lists in React JS