0Pricing
Frontend Academy · Lesson

Lists Keys and Conditional Rendering

Render arrays of elements with .map(), supply stable key props, and conditionally render elements with && and the ternary operator.

Lists Keys and Conditional Rendering is a free Frontend Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Rendering Lists with .map()

Render a dynamic list by calling .map() on an array and returning JSX for each item. React renders an array of elements just like a single element.

const fruits = ['apple', 'banana', 'cherry'];

return (
  <ul>
    {fruits.map(fruit => (
      <li key={fruit}>{fruit}</li>
    ))}
  </ul>
);

The key Prop — Why It Matters

key is a special React prop that helps it identify which items in a list have changed, been added, or removed. Without keys (or with unstable keys like indices), React may produce incorrect updates.

Good vs Bad Keys

Good keys: unique stable IDs from your data (e.g., item.id). Bad keys: array indices (items can reorder) or random values (changes every render).

// Bad: index keys — breaks when list reorders
{items.map((item, i) => <Item key={i} {...item} />)}

// Good: stable unique IDs
{items.map(item => <Item key={item.id} {...item} />)}

Rendering Objects

Map an array of objects to components, destructuring the object into props.

interface Todo { id: number; text: string; done: boolean; }

const todos: Todo[] = [...];

return (
  <ul>
    {todos.map(({ id, text, done }) => (
      <TodoItem key={id} text={text} done={done} />
    ))}
  </ul>
);

Conditional Rendering with &&

Use the && short-circuit operator to conditionally include JSX. If the left side is falsy, nothing renders. Beware of falsy numbers — 0 renders as '0'.

function Status({ count }: { count: number }) {
  return (
    <div>
      {count > 0 && <Badge count={count} />}
      {/* Safer: */}
      {count > 0 ? <Badge count={count} /> : null}
    </div>
  );
}

Conditional Rendering with Ternary

Use the ternary operator to render one of two elements based on a condition.

function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
  return isLoggedIn
    ? <button onClick={logout}>Sign Out</button>
    : <button onClick={login}>Sign In</button>;
}

Conditional Rendering with if Statement

For complex conditions, use an if statement before the return. Return early for loading/error states.

function UserProfile({ user }: { user: User | null }) {
  if (!user) return <p>Loading...</p>;
  if (user.banned) return <p>Account suspended.</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Filtering Before Mapping

Filter the array before mapping to render only matching items. This is clean and readable.

const activeUsers = users.filter(u => u.active);

return (
  <ul>
    {activeUsers.map(user => (
      <UserItem key={user.id} {...user} />
    ))}
  </ul>
);

Empty State

Always handle the empty array case. Rendering an empty list silently is confusing — show a helpful empty state message instead.

return (
  <div>
    {todos.length === 0
      ? <p className="empty-state">No tasks yet. Add one above!</p>
      : <ul>{todos.map(t => <TodoItem key={t.id} {...t} />)}</ul>
    }
  </div>
);

Rendering Portals for Lists

Long lists that need to appear in a different DOM node (like a dropdown) can use ReactDOM.createPortal. But most list rendering is straightforward in-tree.

Virtualised Lists for Performance

For very long lists (1,000+ items), use a virtualisation library like react-window or @tanstack/react-virtual. They render only visible rows, avoiding DOM performance issues.

Quick Check

When is it acceptable to use array index as a key in React lists?

Recap: Lists and Conditional Rendering

Render lists with .map(). Always add stable unique key props. && for optional elements (beware 0). Ternary for either/or. Early returns for loading/error states. Filter before mapping for conditional lists. Show an empty state message for empty arrays. Virtualise very long lists.

Frequently asked questions

Is the “Lists Keys and Conditional Rendering” lesson free?

Yes — the full text of “Lists Keys and Conditional Rendering” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “Lists Keys and Conditional Rendering”?

Render arrays of elements with .map(), supply stable key props, and conditionally render elements with && and the ternary operator. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Lists Keys and Conditional Rendering” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. JSX: Syntax and Transpilation
  2. Functional Components and Props
  3. useState Hook: State and Re-renders
  4. Lists Keys and Conditional Rendering
← Back to Frontend Academy