Why React Keys Are Important?

In this part, we will discuss react keys. As we have talked about react list then we also should know about react keys, So react key are important when you use list because it is recommended to give unique ID or you can say key to each element of the list. Generally, react keys will be in string type.

const numbers = [ 1, 2, 3, 4, 5 ];

const updatedNums = numbers.map((number)=>{
return <li key={index}>{number} </li>;
});

We have here a simple list which contains some numbers, and we are just rendering these elements in <li> tag, this code we also have used in list as well, so it will be easier to understand, and it will be relatable. We have use here key as property for <li> tag, so every element will have unique ID.

Assigning index or some static value will be risky if in future this list gets changed.

How should a key be chosen?

React Keys are generally having string datatype which separates the items of the list. But when we have string items in our list, and they need to key, then corresponding values will be considered as KEY. Also, if the list does not contain any string item, then we will get type cast string as key.

We will get some kind of warning if we don’t use key in list elements, which don’t affect our result, but it would be good practice to add keys with the list. By the way, we can see the warning in the console.

Extracting The React Keys in Components

Let’s assume we have two components and one of them gets the list from the parent component and the other component gets the values from the other component. let’s see an example,

Below code is the incorrect way to use :

Component1.js

import React from 'react';

export default function MenuItems(props)
{
const item = props.item;
return(
<li key = {item.toString()}>
{item}
</li>
);
}

Component2.js


function Navmenu(props)
{
const list = props.menuitems;
const updatedList = list.map((listItems)=>{
return (
<MenuItems item = { listItems } />
);
});
		
return(
<ul>{updatedList}</ul>);
}

As we can see in the above example, in component1.js we have used props to get the list but here we have assigned the keys to list elements which is an incorrect way because we actually don’t need here keys. Remember, if we use some updating operations on elements, then, and then we have to assign the keys. If you assign the keys before the map() function or update, then it will through warning.

Output

Correct way to use keys,

Component1.js

import React from 'react';

export default function MenuItems(props)
{
const item = props.item;
return(
<li>
{item}
</li>
);
}

Component2.js

function Navmenu(props)
{
const list = props.menuitems;
const updatedList = list.map((listItems)=>{
return (
<MenuItems key = {listItem.toString()}item = { listItems } />
);
});
		
return(
<ul>{updatedList}</ul>);
}

React Keys Uniqueness among its Siblings

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import reportWebVitals from './reportWebVitals'; 

function TourBlog(props) {   
  const place = (   
    <ol>   
      {props.data.map((show) =>   
        <li key={show.id}>   
          {show.title}   
        </li>   
      )}   
    </ol>   
  );   
  const famousfor = props.data.map((show) =>   
    <div key={show.id}>   
      <h3>{show.title}: {show.content}</h3>       
    </div>   
  );   
  return (   
    <div>   
      {place}   
      <hr />   
      {famousfor}   
    </div>   
  );   
}   
const data = [   
  {id: 1, title: 'Goa', content: 'Famous For Beaches.....!!'},   
  {id: 2, title: 'Mumbai', content: 'Famous For Street Food.........!!'},   
  {id: 3, title: 'Manali', content: 'Famous for Valleys & Beautiful Scenaries....!!'}   
];   
ReactDOM.render(   
  <TourBlog data={data} />,   
  document.getElementById('root')   
);   
reportWebVitals();

As we have learned about keys that all the elements should have unique keys, it is not required to add key globally you can do within list as well. Here we have a data list which have ID, title, and content field. Now what we have done here is we called a function in which we have accessed list elements using a map() method, here we have assigned the title as our key.