Rendering Lists in React – Using map() and JSX to Display Dynamic Data

In React, the map() method is commonly used to transform arrays of data into JSX elements. This article explains how to render lists using map(), the importance of the key attribute, and how to display multiple properties of each item. It also highlights JSX-specific syntax differences and best practices for rendering dynamic content.

Reactmapkey

Introduction

In JavaScript, data often comes as an array of objects. In React, we use the map() method to transform each item in the array into JSX elements for rendering in the browser.

Using map() to Render a List

const list = [
  {
    title: 'React',
    url: 'https://react.dev/',
    author: 'Jordan Walke',
    num_comments: 3,
    points: 4,
    objectID: 0,
  },
  {
    title: 'Redux',
    url: 'https://redux.js.org/',
    author: 'Dan Abramov, Andrew Clark',
    num_comments: 2,
    points: 5,
    objectID: 1,
  },
];

Basic Rendering with Title Only:

function App() {
  return (
    
      {list.map(function (item) {
        return {item.title};
      })}
    
  );
}

This renders each item’s title inside a <li> element.

Using the key Attribute

React requires a key attribute for each list item to optimize rendering. Use a unique identifier like objectID:

{list.map(function (item) {
  return {item.title};
})}

If no unique ID is available, you can use the index as a last resort, though it’s not recommended for dynamic lists.

Rendering Full Item Details

To display more information, such as the URL, author, comments, and points:

{list.map(function (item) {
  return (
    
      
        {item.title}
      
      {item.author}
      {item.num_comments}
      {item.points}
    
  );
})}

JSX Tips for Lists

You can use any JavaScript expression inside JSX with curly braces {}.
HTML attributes like href can be dynamically assigned from data.
Use {/* comment */} for comments inside JSX.

Conclusion

Using map() to render lists in React is a powerful way to display dynamic data. With JSX, you can mix logic and markup seamlessly. The key attribute ensures efficient re-rendering, and JSX syntax allows you to express complex UI structures with clarity and flexibility.

Rendering Lists in React – Using map() and JSX to Display Dynamic Data

Introduction

Using map() to Render a List

Basic Rendering with Title Only:

Using the key Attribute

Rendering Full Item Details

JSX Tips for Lists

Conclusion

Related Articles

Forms in React – Submitting Data with onSubmit and Action in Search Forms

Third-Party Libraries in React – Using Axios and Async/Await for Data Fetching

Explicit Data Fetching in React – Controlling API Requests with a Confirmation Button

Impossible States in React – Predictable State Management with useReducer

Advanced State Management in React – Using useReducer for Complex Transitions

Conditional Rendering in React – Displaying Loading and Error States for Asynchronous Data

Related Articles

Forms in React – Submitting Data with onSubmit and Action in Search Forms
react-forms-Forms are essential in modern applications. This article walks through building a search form in React using input and button elements. First, we use the onSubmit attribute to manage form submission, then introduce the action attribute to align with native HTML behavior. This structure improves accessibility, readability, and prepares the app for future React updates.submit-search-with-onsubmit-and-action
Continue

Third-Party Libraries in React – Using Axios and Async/Await for Data Fetching
This article explores how to replace the native fetch API with the more stable and feature-rich Axios library for data fetching in React. It also demonstrates how to refactor promise-based code using async/await and try/catch blocks for improved readability and error handling. These techniques enhance compatibility with older browsers, improve testability, and simplify asynchronous logic.
Continue

Explicit Data Fetching in React – Controlling API Requests with a Confirmation Button
In the initial implementation, every keystroke in the search field triggered a new API request. This article demonstrates how to shift to explicit data fetching in React, where data is only fetched when the user clicks a confirmation button. By separating the searchTerm and url states, and using useCallback and useEffect, we gain full control over when API requests are sent.
Continue

Impossible States in React – Predictable State Management with useReducer
Using multiple useState hooks to manage related states like data, loading, and error can lead to impossible states — combinations that should never occur in a well-designed UI. This article shows how to consolidate related states into a single useReducer hook, enabling predictable transitions and eliminating bugs like simultaneous loading and error indicators. By structuring state as a complex object and dispatching clearly defined actions, we gain control and clarity in asynchronous data flows.
Continue

Advanced State Management in React – Using useReducer for Complex Transitions
While useState is ideal for simple state updates, React’s useReducer hook offers a more scalable solution for managing complex state transitions. This article demonstrates how to migrate story-related state from useState to useReducer, handle multiple actions like setting and removing stories, and refactor reducer logic for clarity. It’s a foundational step toward building robust, declarative state logic in React applications.
Continue

Conditional Rendering in React – Displaying Loading and Error States for Asynchronous Data
Conditional rendering in React is a powerful tool for controlling what appears in the UI based on different states. This article explains how to show a “Loading…” message while asynchronous data is being fetched, and how to display an error message if the request fails. Using useState and useEffect, we manage isLoading and isError flags, and render content dynamically using ternary and logical operators.
Continue