KWAS Academy
Learn. Build. Master.
QUICK START:HTMLCSSJavaScriptTypeScriptPythonSQLReactNext.jsNode.jsDSASystem DesignDevOpsCybersecurityAI / ML
Intermediate 16 min readModule: Module 2: JSX Syntax & Element Trees

JSX Rules, Keys & Conditional Rendering

Master JSX expressions, fragment syntax, conditional rendering with && / ternary, and unique list keys.

What You Will Learn in This Lesson

  • Embedding JavaScript expressions with curly braces {expr}
  • Conditional UI rendering with ternary (condition ? A : B) and short-circuit (flag && UI)
  • Why unique 'key' props are mandatory for array rendering (.map())

Introduction & Core Concept

JSX (JavaScript XML) is a syntax extension for JavaScript that lets you write HTML-like markup directly inside JavaScript files.
WHY DOES THIS MATTER IN THE REAL WORLD?

Using stable unique keys on list items allows React's reconciliation engine to reorder DOM nodes without re-mounting the entire list.

List Rendering with Unique Keys

javascript
javascript
1
2
3
4
5
6
7
8
9
10
11
function TechList({ technologies }) {
  return (
    <ul>
      {technologies.map(tech => (
        <li key={tech.id} className="tech-item">
          <strong>{tech.name}</strong> - {tech.category}
        </li>
      ))}
    </ul>
  );
}

Line-by-Line Technical Breakdown

1Never use array indices (index) as keys if list items can be reordered or filtered.

Try It Yourself (Interactive Editor)

Modify the code in real-time and click Run to test live browser output and console logs.

Intelligent Code Runner & Live Sandbox[JAVASCRIPT]
JAVASCRIPT SOURCE EDITOR
Interactive Live Code

Industry Best Practices & Professional Standards

  • Always use unique database IDs for key props.

Lesson Summary & Core Takeaways

  • JSX combines the expressiveness of JavaScript with declarative markup.