Incorrect usage of keys

Example 1: The below code shows the incorrect usage of keys:

Javascript

import React from "react";
import ReactDOM from "react-dom/client";
// Component to be extracted
function MenuItems(props) {
    const item = props.item;
    return <li key={item.toString()}>{item}</li>;
}
 
// Component that will return an
// unordered list
function Navmenu(props) {
    const list = props.menuitems;
    const updatedList = list.map((listItems) => {
        return <MenuItems item={listItems} />;
    });
 
    return <ul>{updatedList}</ul>;
}
const menuItems = [1, 2, 3, 4, 5];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Navmenu menuitems={menuItems} />
  </React.StrictMode>
);

Output: You can see in the below output that the list is rendered successfully but a warning is thrown to the console that the elements inside the iterator are not assigned keys. This is because we had not assigned the key to the elements we are returning to the map() iterator.

ReactJS Keys

React JS keys are a way of providing a unique identity to each item while creating the React JS Lists so that React can identify the element to be processed.

Table of Content

What is a key in React ?
Assigning keys to the list
Issue with index as keys
Difference between keys and props in React
Using Keys with Components
Incorrect usage of keys
Correct usage of keys
Uniqueness of Keys

Incorrect usage of keys

Javascript

ReactJS Keys

Similar Reads

Contact Us