React Basics Lists and keys

by

In React, you can use arrays to render lists of items dynamically. When rendering lists, it’s important to use a unique key for each item in the list. Keys are used by React to identify which items have changed, been added, or been removed from the list.

Here’s an example of how to render a list of items using the `map()` method:

jsx
class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { todos: ["Buy groceries", "Walk the dog", "Do laundry"] };
  }

  render() {
    return (
    {this.state.todos.map((todo, index) => (
  • {todo}
    • ))}
); } }

In this example, we’re defining a `TodoList` component with an initial state of `{ todos: [“Buy groceries”, “Walk the dog”, “Do laundry”] }`. We’re then using the `map()` method to render a `

  • ` element for each item in the `todos` array. We’re also using the `index` parameter as the key for each item in the list.

    Keys should be unique across all items in the list, and they should be stable over time. It’s generally not a good idea to use the index as the key if the order of the items in the list can change, as this can cause performance issues and unpredictable behavior.

    If you’re rendering a large list of items that can change frequently, you can use a library like `react-virtualized` to optimize performance and reduce memory usage.

    Overall, rendering lists is a common task in React, and it’s important to use keys to ensure that the list is updated correctly and efficiently. By using keys and other best practices, you can create dynamic and responsive user interfaces that scale well.