JavaScriptProgrammingWeb DevelopmentReact Conditional Rendering, Lists, and Keys

Nilupul Perera

7 min read10 hours ago

--

React Zero to Senior · Part 1: Foundations · Article 4 of 24

Press enter or click to view image in full size Conditional Rendering, Lists, and Keys

What you’ll learn: how to show and hide UI without stray zeros, render lists from arrays, and pick keys that keep React from mixing up your rows.

Almost every screen you build answers two questions. Should this piece of UI be here right now? And how many of these do I need? A cart badge appears only when the cart has items. A search page shows ten results, or one, or a friendly “nothing found” message.

In Article 3 we wired up events and forms. Now we’ll use that state to decide what to render and how many times .…