Conditional Rendering, Lists, Keys, and Dynamic Views
Render UI conditionally and repeatedly using patterns that appear in almost every real React screen.
Inside this chapter
- Conditional Rendering Basics
- Rendering Lists
- Why Keys Matter
- Loading, Empty, and Error States
- Real Example
Series navigation
Study the chapters in order for the clearest path from React fundamentals to advanced architecture, optimization, testing, and product-ready frontend engineering. Use the navigation at the bottom to move smoothly through the full tutorial series.
Conditional Rendering Basics
{isLoggedIn ? <Dashboard /> : <LoginPrompt />}React can show different UI depending on state, props, permissions, loading status, feature flags, or API responses. Conditional rendering is one of the most common patterns in application code.
Rendering Lists
{courses.map((course) => (
<li key={course.id}>{course.title}</li>
))}Arrays are commonly mapped into repeated UI. This is how React renders tables, lists, cards, dropdown options, menu items, tabs, and search results.
Why Keys Matter
Keys help React identify list items between renders. Stable keys reduce rendering confusion and prevent subtle UI bugs. Using array indexes as keys is sometimes acceptable for static lists, but stable unique identifiers are usually better for dynamic data.
Loading, Empty, and Error States
Professional UIs rarely show only success screens. Good React components handle loading states, empty results, missing permissions, and backend errors gracefully. This is where conditional rendering becomes part of product quality rather than just syntax practice.
Real Example
A course catalog page may render a spinner while fetching, an empty-state panel if nothing matches filters, a grid of cards when results exist, and an error banner if the request fails. All of these are normal dynamic view patterns.