Typorithm · medium

Conditional & List Rendering

react-renderingreactconditionallistkey

Saved on this device

Full lesson · 8 learning steps Open any exercise for focused practice

Step 1 of 8 · intro card

Learn Conditional & List Rendering

Components & JSX

Render conditionally with an early return, &&, or a ternary. Turn an array into JSX with map, and give each sibling a stable, unique key so React can diff the list efficiently. Avoid using the array index as a key when the list can reorder.

Conditional rendering decides what to show. Here an early return renders <p>Empty</p> when there are no items; you can also use && or a ternary inline inside JSX.

To render a list, map the array to JSX: items.map turns each string into an <li>. The result is an array of elements React renders inside the <ul>.

Every sibling in a list needs a key — a stable, unique string that lets React match elements between renders and update only what changed. Using the array index breaks this when the list reorders.

Conditionally render with early return, &&, or ternary.

map an array to JSX to render a list.

Each list sibling needs a stable unique key.

function List({ items }: { items: string[] }) {
  if (items.length === 0) return <p>Empty</p>;
  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

Read the implementation

Connect each part of the code to the concept before you type.

1. Conditional early return

An early return renders a fallback when the list is empty, before the main JSX runs.

if (items.length === 0) return <p>Empty</p>;

2. Mapping to JSX

map transforms each array item into a JSX element, producing a list of children.

{items.map((item) => (

3. List item with key

Each mapped element needs a stable, unique key so React can track it across renders.

<li key={item}>{item}</li>

4. The key prop

key identifies a sibling uniquely; here the item value itself is the stable identifier.

key={item}

5. List container

The mapped <li> elements are nested inside a single <ul> parent.

<ul>

A complete learning loop

Understand

Read the concept map and follow the code breakdown.

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.