Rendering Lists

Rendering with map

Use JavaScript's map method to render lists of elements.

Basic Map

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

// Usage
<TodoList
  todos={[
    { id: 1, text: "Learn React" },
    { id: 2, text: "Build app" },
    { id: 3, text: "Deploy" }
  ]}
/>

Map with Index

function NumberedList({ items }) {
  return (
    <ol>
      {items.map((item, index) => (
        <li key={index}>
          {index + 1}. {item}
        </li>
      ))}
    </ol>
  );
}

Complex List Items

function UserList({ users }) {
  return (
    <div className="user-list">
      {users.map((user) => (
        <div key={user.id} className="user-card">
          <img src={user.avatar} alt={user.name} />
          <h3>{user.name}</h3>
          <p>{user.email}</p>
        </div>
      ))}
    </div>
  );
}

Nested Lists

function CategoryList({ categories }) {
  return (
    <div>
      {categories.map((category) => (
        <div key={category.id}>
          <h2>{category.name}</h2>
          <ul>
            {category.items.map((item) => (
              <li key={item.id}>{item.name}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

Filtering

Use filter to show only certain items.

Basic Filter

function ActiveTodoList({ todos }) {
  const activeTodos = todos.filter((todo) => !todo.done);

  return (
    <ul>
      {activeTodos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

Filter with Search

function SearchableList({ items }) {
  const [search, setSearch] = useState("");

  const filteredItems = items.filter((item) =>
    item.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div>
      <input
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {filteredItems.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Filter and Map Together

function Stats({ numbers }) {
  const evenNumbers = numbers.filter((n) => n % 2 === 0);
  const doubled = evenNumbers.map((n) => n * 2);

  return (
    <div>
      <p>Even numbers: {evenNumbers.join(", ")}</p>
      <p>Doubled: {doubled.join(", ")}</p>
    </div>
  );
}

Conditional Rendering in Map

function NotificationList({ notifications }) {
  return (
    <ul>
      {notifications.map((notification) => (
        <li key={notification.id}>
          {notification.read ? (
            <span>{notification.message}</span>
          ) : (
            <strong>{notification.message}</strong>
          )}
        </li>
      ))}
    </ul>
  );
}

List Performance

Key Requirements

• Keys should be unique among siblings
• Keys should be stable (not changing)
• Avoid using array index as key (if list can reorder)

Performance Tips

// Bad: Creating new array on every render
function TodoList({ todos }) {
  return (
    <ul>
      {todos
        .filter((t) => !t.done) // Creates new array
        .map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
    </ul>
  );
}

// Better: Memoize filtered list
function TodoList({ todos }) {
  const activeTodos = useMemo(
    () => todos.filter((t) => !t.done),
    [todos]
  );

  return (
    <ul>
      {activeTodos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

Virtualization for Large Lists

// For very large lists (1000+ items)
// Consider using react-window or react-virtualized

import { FixedSizeList } from "react-window";

function LargeList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].name}
    </div>
  );

  return (
    <FixedSizeList
      height={600}
      width="100%"
      itemCount={items.length}
      itemSize={35}
    >
      {Row}
    </FixedSizeList>
  );
}

Avoid These Mistakes

// Bad: No key
{items.map((item) => <li>{item.name}</li>)}

// Bad: Using index as key for reorderable list
{items.map((item, index) => <li key={index}>{item.name}</li>)}

// Bad: Math.random() as key
{items.map((item) => <li key={Math.random()}>{item.name}</li>)}