Whenever we render a list in React using the map method which is mostly preferred, we need to provide the keys. If we do not provide a key during rendering we get a warning in our react application. To remove that warning and optimize our code we provide a key.
Keys are something that helps react to identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity while they are rendered.
Whenever we are trying to render the list we always keep more than one list item or array of list items in the list. And to render it we use the method of the map over the array of items that are going to be in the list.
Purpose of Keys:
- To provide a unique identity to each list element from lists.
- To remove the warning or error that react throw if the key is not used.
- It is used to identify which items have changed, updated, or deleted from the Lists.
- It is useful when a user alters the list.
- It helps react to determine which component to be re-rendered.
Creating React Application
Step 1: Create a React application using the following command:
npx create-react-app example
Step 2: After creating your project folder i.e. example, move to it using the following command:
cd example
Step 3: Create folder components inside src folder of react project directory and inside the components folder create files List.jsx
Project structure: It will look like this.
Folder Structure
Example 1: Basic example of rendering a list. Write down the following code in index.js, App.js, and List.jsx file.
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); reportWebVitals(); |
App.js
import React from 'react'; import List from './components/List'; const numbers = [1, 2, 3, 4, 5]; function App() { return ( <div className="App"> <List numbers={numbers} /> </div> ); } export default App; |
List.js
import React from "react"; function List(props) { const numbers = props.numbers; const listItems = numbers.map((number,index) => <li>{number}</li>); return ( <> <div>List of numbers</div> <ul>{listItems}</ul> </> ); } export default List; |
Step to run the application: Run the following command from the root directory of the project.
npm start
Output: In the above example, we get the warning that a key should be provided when the code is executed because keys should be provided in the list as a prop.
List without key
The most used way to pick a key is to use an index that uniquely identifies a list item among its siblings. Let’s add index as a key in the above code
Example 2: Using key attributes in the list
List.jsx
import React from "react"; function List(props) { const numbers = props.numbers; const listItems = numbers.map((number,index) => <li key={index}>{number}</li>); return ( <> <div>List of numbers</div> <ul>{listItems}</ul> </> ); } export default List; |
Output: Now, the above code will not cause any error because we provided key in the list items. Mostly its recommended to use the unique created id associated with each element in the array of items.
List with key
We can also use unique id’s in place of the index because the index may not work perfectly as it will change whenever there is a change in items of the list. Using id’s are in the key attribute is the best way to provide keys and make better performance. If we do not choose to assign an explicit key to list items then React will default to using indexes as keys.
The best method to create a unique id is to make a list item as a string and provide a key if all list items are unique.
List.jsx
import React from "react"; function List(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li key={number.toString()}>{number}</li>); return ( <> <div>List of numbers</div> <ul>{listItems}</ul> </> ); } export default List; |
