Rendering Lists

Written by Swapnil RajaPublished 29 Aug 2026

Rendering a list is map. There is no loop syntax in JSX because an array of elements is already something React knows how to render.

map returns elements

Because a JSX element is just a value, mapping an array of data to an array of elements is ordinary JavaScript. React renders each item in order.

Data to elements

jsx

function List() {
  const people = [
    { id: 1, name: "Ada", role: "Engineer" },
    { id: 2, name: "Grace", role: "Admiral" },
    { id: 3, name: "Alan", role: "Logician" },
  ]

  return (
    <ul>
      {people.map((person) => (
        <li key={person.id}>
          <strong>{person.name}</strong> — {person.role}
        </li>
      ))}
    </ul>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<List />)

PreviousShowing, Hiding and Losing State NextKeys Explained

Filter, then sort a copy

jsx

function Roster() {
  const [onlyActive, setOnlyActive] = React.useState(false)
  const people = [
    { id: 1, name: "Ada", active: true },
    { id: 2, name: "Grace", active: false },
    { id: 3, name: "Alan", active: true },
  ]

  const shown = people
    .filter((person) => (onlyActive ? person.active : true))
    .slice()                                  // copy before sorting
    .sort((a, b) => a.name.localeCompare(b.name))

  return (
    <div>
      <button onClick={() => setOnlyActive((v) => !v)}>
        {onlyActive ? "Show everyone" : "Only active"}
      </button>
      <ul>
        {shown.map((person) => <li key={person.id}>{person.name}</li>)}
      </ul>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Roster />)

Say something when there is nothing

jsx

function Items({ items }) {
  if (items.length === 0) {
    return <p style={{ color: "#64748b" }}>Nothing here yet.</p>
  }

  return <ul>{items.map((item) => <li key={item}>{item}</li>)}</ul>
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <div>
    <Items items={["one", "two"]} />
    <Items items={[]} />
  </div>
)

A map inside a map

jsx

function Groups() {
  const groups = [
    { id: "a", title: "Fruit", items: ["apple", "pear"] },
    { id: "b", title: "Tools", items: ["hammer", "saw"] },
  ]

  return (
    <div>
      {groups.map((group) => (
        <div key={group.id}>
          <strong>{group.title}</strong>
          <ul>
            {group.items.map((item) => <li key={item}>{item}</li>)}
          </ul>
        </div>
      ))}
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Groups />)

Rendering Lists

map returns elements

Filtering and sorting

The empty case

Nested lists