Logical OR (||) for Default Content

Snippet

Logical OR (||) for Default Content

You can use the logical OR operator (||) in JSX to provide a fallback value. If the first value is falsy (like null or undefined), the second value will be displayed instead.

snippet.js
javascript
function Welcome({ username }) {
  return <h1>Welcome, {username || 'Guest'}!</h1>;
}

react

Breakdown

{username || 'Guest'}

Checks if username exists; if not, it defaults to the string 'Guest'.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Logical OR (||) for Default Content

Related