Describing the UI
This page explains how to build data-driven UIs in React: passing read-only props from parent to child, choosing what renders with conditionals (if, ternary, &&), and rendering lists from arrays with .map() and stable keys. These patterns make components reusable and keep the tree predictable as data changes.
Who This Is For
Learners following the React or Next.js roadmap.
1. Passing Props
Props (short for "properties") are how you pass data down the tree from a parent component to a child. They are read-only.
The Concept: Imagine a component is a function. Props are the arguments.
// Parent
<Profile name="Bob" role="Teacher" />
// Child
function Profile(props) {
return <h2>{props.name} is a {props.role}</h2>;
}
Learn it on Scrimba: -> Interactive Lesson: Passing Data to Components
2. Conditional Rendering
Sometimes you want to show different things depending on the state of your app (e.g., a "Login" button vs a "Logout" button).
You can use standard JavaScript logic:
ifstatements- Ternary operators (
condition ? true : false) - Logical AND (
condition && true)
Learn it on Scrimba: -> Interactive Lesson: Conditional Rendering
3. Rendering Lists
You will often want to display multiple similar components from a collection of data. In React, you use the JavaScript .map() array method for this.
Key Rule: Every list item needs a unique key prop so React can track it.
const items = ["Apple", "Banana", "Cherry"];
const listItems = items.map(item => <li key={item}>{item}</li>);
Learn it on Scrimba: -> Interactive Lesson: Mapping Components
Choose This If
Choose this page if: You're learning React or Next.js and want a docs-to-Scrimba roadmap.
Related Scrimba courses
Upgrade with Scrimba Pro when you want career paths and advanced modules; the core Learn React course is free.
Ready to Upgrade Your Learning?
Use our partner link to claim 20% off Scrimba Pro and unlock all courses and career paths.