Command Palette

Search for a command to run...

Hectal
Phase 3Beginner4 of 28 in React

Conditions and Lists

Show different UI for different data with if, ternaries and &&, turn arrays into lists with map, and use keys so React never mixes up your rows.

Real apps rarely show the same thing every time. A logged-out visitor sees a sign-in button, an empty cart shows a friendly message, and a shop shows one card for every product in its data. This phase teaches the two skills behind all of that: conditional rendering (choosing what to show) and list rendering (showing one element for every item in an array).

There is nothing new to memorise: React uses plain JavaScript for both. You'll use if, the ternary ? :, &&, filter and map, and learn the few places where they surprise people, such as the stray 0 on the page.

The most important idea in the phase is the key. Keys are how React tells list items apart between renders. Get them wrong and typed text, ticked boxes and other state quietly jump to the wrong row. You'll see that bug happen live, understand exactly why, and learn the rules that prevent it.

0/4 · 0%
4 topics ~2 h 14 code blocks & diagrams
Start with the first topic
1
3.1

Conditional Rendering

Conditional rendering means a component shows different UI for different data, using plain JavaScript: an if with an early return, the ternary ? :, &&, returning null, conditional props and classes, and picking a component from a variable or an object map.

32 min 1 diagram 3 code practice

2
3.2

Rendering Lists with map

To show a list, keep the data in an array and turn every item into an element with map; use filter first to choose which items appear, and move the look of one item into its own component.

29 min 3 code practice

3
3.3

Keys: How React Tells Items Apart

A key is a label you give each item in a list so React can match it with the same item on the next render; keys must be unique among siblings and stable, which is why they come from your data's ids and not from the index or Math.random().

33 min 4 code practice

4
3.4

Nested and Grouped Lists

Lists inside lists are a map inside a map, with keys at every level; when data arrives flat, group it first (with Object.groupBy or reduce) and then render the groups, and always decide what an empty list or an empty group should show.

30 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Show and hide the details

The button has id="toggle". At the start it says Show details and no details are on the page.

Beginner
2

Render a list from data

Render every planet in the planets array as an <li> inside the <ul id="planets">, in the same order.

Beginner
3

A search box with an empty state

The input has id="search". Show only the names that contain the typed text, ignoring upper and lower case, as <li> items inside <ul id="results">.

Beginner
4

Fix the notes that jump rows

Each row has a person's name in a <span> and a note box (<input className="note">). The button id="add-top" adds Meera at the top of the list.

Beginner
5

Mini build: a grouped task board

Build a board with three columns, in this order: <section id="col-todo">, <section id="col-doing"> and <section id="col-done">. Each has an <h2> reading To do (N), Doing (N) or Done (N), where N is the number of tasks in it.

Beginner