The Project | About Us | Contribute | Donations | License

HOME

In this section, we will explore how to render lists in React and understand the importance of keys in list items. Lists are a common data structure used to display a collection of items, and keys help React identify which items have changed, been added, or removed.

Rendering Lists in React

To render a list in React, you can use the JavaScript map() function to iterate over an array and return a new array of JSX elements.

Example: Rendering a List of Numbers

Let's start with a simple example of rendering a list of numbers.

import React from 'react';

function NumberList() {
  const numbers = [1, 2, 3, 4, 5];
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>{number}</li>
  );

  return (
    <ul>
      {listItems}
    </ul>
  );
}

export default NumberList;

Explanation

Array of Numbers: We have an array of numbers [1, 2, 3, 4, 5].
Mapping to JSX: We use the map() function to iterate over the array and return a new array of <li> elements.
Key Prop: Each <li> element is given a unique key prop. In this case, we use the number itself as the key.

Why Keys are Important

Keys help React identify which items have changed, been added, or removed. This improves the performance of the application by minimizing the number of DOM manipulations.

Example: Rendering a List of Objects

When rendering a list of objects, it's common to use a unique identifier from the object as the key.

import React from 'react';

function TodoList() {
  const todos = [
    { id: 1, text: 'Learn React' },
    { id: 2, text: 'Build a React App' },
    { id: 3, text: 'Deploy the App' }
  ];

  const listItems = todos.map((todo) =>
    <li key={todo.id}>{todo.text}</li>
  );

  return (
    <ul>
      {listItems}
    </ul>
  );
}

export default TodoList;

Explanation

Array of Objects: We have an array of todo objects, each with an id and text.
Mapping to JSX: We use the map() function to iterate over the array and return a new array of <li> elements.
Key Prop: Each <li> element is given a unique key prop using the id from the todo object.

Common Mistakes with Keys

Using Index as Key: Using the array index as a key can lead to issues if the list order changes. It's better to use a unique identifier.
Duplicate Keys: Ensure that keys are unique among siblings. Duplicate keys can cause unexpected behavior.

Example: Incorrect Use of Index as Key

const listItems = todos.map((todo, index) =>
  <li key={index}>{todo.text}</li>
);

Correct Use of Unique Identifier as Key

const listItems = todos.map((todo) =>
  <li key={todo.id}>{todo.text}</li>
);

Practical Exercise

Task

Create a React component that renders a list of users. Each user should have a unique id, name, and email. Use the id as the key for each list item.

Solution

import React from 'react';

function UserList() {
  const users = [
    { id: 1, name: 'John Doe', email: '[email protected]' },
    { id: 2, name: 'Jane Smith', email: '[email protected]' },
    { id: 3, name: 'Bob Johnson', email: '[email protected]' }
  ];

  const listItems = users.map((user) =>
    <li key={user.id}>
      {user.name} - {user.email}
    </li>
  );

  return (
    <ul>
      {listItems}
    </ul>
  );
}

export default UserList;

Explanation

Array of Users: We have an array of user objects, each with an id, name, and email.
Mapping to JSX: We use the map() function to iterate over the array and return a new array of <li> elements.
Key Prop: Each <li> element is given a unique key prop using the id from the user object.

Conclusion

In this section, we learned how to render lists in React and the importance of using keys. Keys help React efficiently update and render components by identifying which items have changed, been added, or removed. Always use a unique identifier as the key to avoid common pitfalls and ensure optimal performance.

Lists and Keys

Rendering Lists in React

Example: Rendering a List of Numbers

Explanation

Why Keys are Important

Example: Rendering a List of Objects

Explanation

Common Mistakes with Keys

Example: Incorrect Use of Index as Key

Correct Use of Unique Identifier as Key

Practical Exercise

Task

Solution

Explanation

Conclusion

React Course

Module 1: Introduction to React

Module 2: React Components

Module 3: Working with Events

Module 4: Advanced Component Concepts

Module 5: React Hooks

Module 6: Routing in React

Module 7: State Management

Module 8: Performance Optimization

Module 9: Testing in React

Module 10: Advanced Topics

Module 11: Project: Building a Complete Application