Conditional Rendering
Conditional rendering is React deciding what to show based on a yes-or-no question, like a light switch that only turns on the lamp if it's dark.
In this page:
Syntax
{condition ? <ElementA /> : <ElementB />}
{condition && <Element />}
if (!condition) return null;Using a Ternary for Either/Or Output
The condition ? A : B ternary operator is the standard way to render one of two things in JSX based on a condition.
Note:
Keep ternaries in JSX short -- if the branches get long, compute the result in a variable above the return instead.
Warning:
Nesting multiple ternaries inside one another quickly becomes unreadable -- an if/else above the return, or an early return, is often clearer.
Example: Using a Ternary for Either/Or Output
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function StatusMessage() {
const isOnline = true;
return <p>{isOnline ? 'You are online' : 'You are offline'}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<StatusMessage />);
</script>
</body>
</html>Using && to Render Something or Nothing
condition && <Element /> renders the element only when condition is true; when it's false, JSX renders nothing at all for that expression.
Note:
&& is ideal when there's no else case -- you either show something or show nothing.
Warning:
condition && <Element /> renders the literal number 0 (visible on the page!) if condition happens to be the number 0 instead of a real boolean -- convert to a boolean first (!!count) to avoid this.
Example: Using && to Render Something or Nothing
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Badge() {
const unread = 3;
return (
<div>
<p>Inbox</p>
{unread > 0 && <span> ({unread} unread)</span>}
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Badge />);
</script>
</body>
</html>Returning null to Render Nothing
A component can return null instead of JSX to render nothing at all -- useful when a component should sometimes not appear in the UI.
Note:
Returning null is different from returning an empty string -- both render nothing visible, but null is the conventional choice.
Warning:
Forgetting the return keyword before null leaves the function returning undefined, which triggers a React error rather than rendering nothing cleanly.
Example: Returning null to Render Nothing
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function MaybeMessage() {
const show = false;
if (!show) {
return null;
}
return <p>You will not see this.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<MaybeMessage />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Using
&&with a falsy number (like 0), which can accidentally render a stray0on the page. - Writing full if/else blocks directly inside JSX curly braces, which isn't valid.
- Forgetting the ternary operator needs both a true and false branch, unlike
&&.
Chapter Summary
- Conditional rendering shows different UI based on a condition, using normal JavaScript.
- The ternary operator (
condition ? a : b) picks between two JSX outputs. - The
&&operator renders something only when a condition is true, and nothing otherwise. - Conditions must be expressions, not statements, to work inside JSX.
Browser Support
No browser-specific restrictions -- this relies on standard JavaScript operators.
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: