JSX Rendering Lists (Live Playground)

Rendering lists is a common task when building user interfaces with React. In this tutorial, we'll explore how to render lists in JSX using the map() function and the key attribute, with sample code and simple explanations.

Rendering Lists with map()

The map() function is a popular method for rendering lists in React. It allows you to transform an array of data into an array of JSX elements. Here's an example of rendering a list using the map() function:

JavaScript

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

function NumberList() {
  const listItems = numbers.map(number => <li>{number}</li>);

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

In this example, we created a NumberList component that renders an unordered list (<ul>) of numbers. We used the map() function to create an array of <li> elements, one for each number in the numbers array.

Live Playground, Try it Yourself

Keys in Lists

When rendering lists in React, it's important to provide a unique key attribute for each element. Keys help React identify which items have been added, removed, or changed. The value of the key attribute should be unique among its siblings. Here's an example of using keys when rendering a list:

JavaScript

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

function NumberList() {
  const listItems = numbers.map(number => <li key={number}>{number}</li>);

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

In this example, we added a key attribute to each <li> element, using the number value as the key. This ensures that each element in the list has a unique identifier.

Live Playground, Try it Yourself

Rendering Lists Inline

You can also render lists inline within your JSX by calling the map() function directly inside the JSX expression. Here's an example of rendering a list inline:

JavaScript

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

function NumberList() {
  return (
    <ul>
      {numbers.map(number => (
        <li key={number}>{number}</li>
      ))}
    </ul>
  );
}

In this example, we moved the map() function call directly into the JSX expression, creating a more concise and readable component.

Live Playground, Try it Yourself

Conclusion

Rendering lists is a fundamental skill when working with React and JSX. By understanding how to use the map() function and the key attribute, you'll be better equipped to create dynamic and interactive lists in your React applications. With a solid grasp of JSX list rendering techniques, you'll be well on your way to becoming an effective React developer.