Conditional Rendering
In this page:
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>- 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
&&.
- 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.
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: