JSX conditional Rendering

Choose the right output for every branch.

Read the explanation, run the worked example, then complete the matching Examples and Assignments tabs. Your original materials remain available alongside these notes.

Understand the idea

A ternary chooses between two values and can appear inside JSX. An if statement can choose an entire return value before the JSX. Use the simplest branch structure that clearly describes the rule. For your greatest-number exercises, decide what happens when values are equal; an unexplained else can label an equal pair incorrectly.

Conditions also choose attributes: src={condition ? firstUrl : secondUrl}. The element remains an image, while its source changes. Give it alt text describing the selected image. For positive/negative tasks, zero is a separate case. For parity, n % 2 === 0 works with positive and negative integers.

Data / props ↓ JavaScript expression ↓ JSX elements ↓ Visible UI

Run the example

Use a separate React practice project with a Node.js version supported by Vite. Create it once with these commands, then use its development URL. Do not paste this into the Edupoly website’s own source files.

npm create vite@latest react-practice -- --template react
cd react-practice
npm install
npm run dev

Replace src/App.jsx with the following complete example. Keep Vite’s generated src/main.jsx entry point.

src/App.jsx

export default function App() {
  const a = 14, b = 14, c = -3;
  const n = 0;
  return <main>
    <h1>{a === b ? 'Equal values' : a > b ? 'A is greater' : 'B is greater'}</h1>
    <p>Greatest of three: {Math.max(a, b, c)}</p>
    <p>{n % 2 === 0 ? 'Even' : 'Odd'}</p>
    <p>{n === 0 ? 'Zero' : n > 0 ? 'Positive' : 'Negative'}</p>
  </main>;
}

Apply this to your assignments

Test your four assignments with unequal inputs, equal inputs, all-negative inputs and zero. Add two local images to public and choose their URLs with a ternary.

Your existing examples

• Display different elements conditionally React component
• Conditionally apply url to image in React componen
• Conditionally apply url to image in JSX

Open the Examples tab to run or inspect these supplied projects. Their original links are preserved.

Open Assignments for your complete original worksheet. Use the assignment workspace link to submit completed work.

Common mistakes

Avoid deeply nested ternaries for complex screens. The expression count && <p>Items</p> renders 0 when count is zero; use count > 0 instead.

Check your understanding

1. Predict the output before running the example, then compare it with the result panel.
2. Explain which value each expression reads and which action changes it.
3. Try the boundary cases listed in the practice task and record what you observe.
4. Rebuild one matching assignment without copying, then compare behavior with the original example.

Reference

Official documentation for this topic · Vite setup requirements