Call +91 9649695189
React Tutorial

Conditional Rendering and Lists

Choose what appears from application data and render collections with stable keys.

Concept

React uses normal JavaScript control flow for conditions. A component can return different JSX, use a ternary expression, include content with the logical AND operator or return null when nothing should render.

Arrays are commonly transformed into elements with map. Each sibling in a rendered list needs a stable key from the underlying data so React can match items across updates.

Example

const skills = [
    { id: 1, name: "JSX" },
    { id: 2, name: "State" }
];

export default function SkillList() {
    return <ul>{skills.map(skill =>
        <li key={skill.id}>{skill.name}</li>
    )}</ul>;
}
Type the example yourself and change at least one value. Small experiments reveal syntax and behavior faster than passive reading.

Practice Tasks

  1. Show a message only when a learner is signed in.
  2. Render an array of course objects with map.
  3. Filter a list before rendering it and keep stable keys.

Key Takeaways

  • Use JavaScript for rendering decisions.
  • map turns data into element collections.
  • Keys identify sibling items between renders.
Next
Events and Local State →