Conditional Rendering

A result card should display Passed for a mark at or above the pass threshold and Needs practice otherwise. Rendering every possible message would confuse the student. The interface needs to reflect a decision.

Conditional rendering uses ordinary JavaScript conditions to choose which React elements or text to return. Use an if statement before return for larger alternatives, or a conditional expression for a small choice inside JSX.

Explain
Describe different screens for a present or missing student record.
Trace
Choose between a conditional expression and an early return.
Apply
Explain why numeric zero can appear when used before &&.

Conditional Rendering: follow the relationship

Read each mark
Asha has 40; Ravi has 39.
Compare with 40
marks >= 40 is true for Asha and false for Ravi.
Choose the label
Asha displays Passed; Ravi displays Needs practice.

Read this relationship alongside the complete code. This diagram explains the flow; it does not execute React.

Build the mental model

Define the school rule precisely before choosing syntax. Here 40 is inclusive: a mark of 40 passes. The condition marks >= 40 calculates a Boolean. That Boolean controls presentation but does not modify the student’s stored mark.

Test both branches and the boundary

A rule such as marks >= 40 needs tests for a passing value, a failing value and the exact boundary. If the threshold is accidentally written as greater than 40, most passing examples will still look correct. The boundary example is the observation that exposes that mistake.

Visibility can affect component state. Removing a child from the tree may discard its memory; hiding it with CSS leaves it mounted. Those are different decisions. When a form must preserve entered text across a tab change, think about component identity as well as what users can see.

Read the complete React example

The example uses a conditional expression to choose a result message. The practice hides an optional note with a Boolean condition. You can return null from a component to omit its content while keeping that component’s place in the tree.

React · JavaScript with JSX

import React from 'react';
function Result({ name, marks }) {
  return <p>{name}: {marks >= 40 ? 'Passed' : 'Needs practice'}</p>;
}
export default function App() {
  return <main><Result name="Asha" marks={40} /><Result name="Ravi" marks={39} /></main>;
}

Expected screen and behavior

Initial screen: Asha: Passed Ravi: Needs practice

Connect the source to the screen

React · main example

import React from 'react';
function Result({ name, marks }) {
  return <p>{name}: {marks >= 40 ? 'Passed' : 'Needs practice'}</p>;
}
export default function App() {
  return <main><Result name="Asha" marks={40} /><Result name="Ravi" marks={39} /></main>;
}

React renders strings and numbers but omits false, null and undefined as visible children. Consequently count && <p>...</p> can display an unwanted 0 when count is zero. Use count > 0 when the left side should explicitly represent a condition.

Avoid the common mistakes

A hidden button is not an authorization check. Important permissions must also be enforced by the system handling the action. Keep Hooks outside conditional branches, even when JSX itself is conditional; Hook order must remain consistent across renders.

Practice before reading the solution

React · starting example

import React from 'react';
function Result({ name, marks }) {
  return <p>{name}: {marks >= 40 ? 'Passed' : 'Needs practice'}</p>;
}
export default function App() {
  return <main><Result name="Asha" marks={40} /><Result name="Ravi" marks={39} /></main>;
}

Show a result at exactly the boundary and include a practice note only for a failing mark.

Predict the initial visible text and explain which values determine it. Then inspect the worked solution below. Change one relevant input in your local project and check whether the screen follows your prediction. A working screen should be checked for the intended meaning, not merely the absence of an error.

Worked practice solution

The solution gives the passing mark no extra note and displays both the failure message and practice guidance for the lower mark. Testing 40 and 39 checks the boundary that an ordinary successful example might miss.

React · JavaScript with JSX

import React from 'react';
function Result({ name, marks }) {
  const needsPractice = marks < 40;
  return <article><h2>{name}</h2><p>{needsPractice ? 'Needs practice' : 'Passed'}</p>{needsPractice && <p>Review the maths worksheet.</p>}</article>;
}
export default function App() {
  return <main><Result name="Asha" marks={40} /><Result name="Ravi" marks={39} /></main>;
}

Expected screen and behavior

Initial screen: Asha Passed Ravi Needs practice Review the maths worksheet.

Choose the explanation that matches React and JavaScript behavior. Review the reasoning for each alternative before moving on.

Use the idea in the next lesson

Conditional rendering uses ordinary JavaScript conditions to choose which React elements or text to return. Use an if statement before return for larger alternatives, or a conditional expression for a small choice inside JSX.

Continue with Rendering Lists and Keys. Revisit Children and Named Slots when the relationship between inputs and the resulting screen needs another look.

Read the primary reference: React documentation on Conditional Rendering.

Reaching the recap and completing the quizzes are separate milestones.

Next lesson: Rendering Lists and Keys →

Conditional Rendering