React / React Lists
Home /React /React Lists

React Lists

💻 React
Table of Contents

What Are React Lists?

A React List is a collection of JSX elements rendered dynamically from an array of data. Instead of hard-coding each item manually, you transform (map) an array of values into an array of JSX elements, which React renders into the DOM. React lists are the foundation of every data-driven UI from todo apps and course catalogues to dashboards and social feeds.

In traditional HTML, you write each <li> manually. In React, you have an array of data and you transform it into JSX elements programmatically. This makes your UI data-driven and dynamic  add an item to the array and it instantly appears in the UI.

Lists in React are built primarily using JavaScript’s native Array.map() method, which applies a function to every element of an array and returns a new array of results, in our case, JSX elements. React then renders that array of JSX elements into the DOM.

Concept Description & React specifics
.map(): Primary Method In React, .map() is the standard, idiomatic way to transform an array into a collection of JSX elements.
It loops over each item, returns a React component or DOM element, and generates UI dynamically.Clean & declarative Immutable pattern Pure rendering
key (Required Prop) Each element inside a .map() must have a unique key prop. Keys help React identify which items have changed, added, or removed.

🔹 Why? Enables stable identity, efficient reconciliation & optimal re-renders.
🔹 Best practice: Use stable IDs (database ids). Avoid using index as key unless list is static & never reordered.
 <div key={index}>       <Item key={item.id} />
Array · Data Source The foundation of .map() is a JavaScript array — fetched from state, props, or API. Each array element is mapped to UI.

Example patterns:
users.map(user => <UserCard key={user.id} {...user} />),
products.map(prod => <li key={prod.sku}>{prod.name}</li>).

The array drives the entire rendering loop; empty array → nothing rendered.
Output: JSX[] .map() returns a new array of JSX elements (or React components). This array can be embedded directly into the component’s render logic.

Internally React renders a list of children from that array. The output is a list of components / DOM nodes that appear in the virtual DOM.

Each mapped element becomes part of the React element tree.
return ( <div>{data.map(item => <Card key={item.id} />)}</div> )

Quick Access

Cheatsheet Code Example
Basic .map() 
{items.map((item) => (
  <li key={item.id}>
    {item.name}
  </li>
))}
Filter then Map 
{items
  .filter((x) => x.active)
  .map((x) => (
    <Item key={x.id} />
  ))}
Sort then Map 
{[...items]
  .sort((a, b) =>
    a.name.localeCompare(b.name)
  )
  .map((x) => ...)}
Add to List 
setItems((prev) => [
  ...prev,
  { id: nextId, name }
]);
Update Item 
setItems((prev) =>
  prev.map((x) =>
    x.id === id
      ? { ...x, done: true }
      : x
  )
);
Delete Item 
setItems((prev) =>
  prev.filter(
    (x) => x.id !== id
  )
);
Nested Lists 
{sections.map((sec) => (
  <div key={sec.id}>
    {sec.items.map((i) => (
      <p key={i.id}>...</p>
    ))}
  </div>
))}
Fragment with Key 
{items.map((x) => (
  <Fragment key={x.id}>
    <dt>{x.term}</dt>
    <dd>{x.def}</dd>
  </Fragment>
))}