Logical AND (&&)

Learn the condition && element pattern and its pitfalls.

Logical AND (&&)

The logical AND pattern looks like { 'condition && element' }. If the condition is true, element renders; otherwise nothing happens. It's ideal for one-sided show when situations.

Example: { 'hasError && <Error />' }. If hasError is true, Error renders; otherwise nothing.

Beware: if the condition returns a falsy value like 0, React may print 0 on screen. So make sure the condition is boolean: { 'hasError === true && <Error />' } is safer.

&& pitfall

When you write { 'count && <List />' }, if count is 0 React may print 0 on screen. This is because 0 is rendered as a numeric value.

Two common fixes: turn the condition into a boolean (count > 0) or use !!count to make it an explicit boolean.

Ternary also works: { 'count > 0 ? <List /> : null' }. This removes the 0 problem entirely.

Exercise Show error message

Complete the skeleton. Write a component called ErrorBox that takes ({ '{ hasError }' }) as parameter. If hasError === true, return <p className="error">An error occurred</p>; otherwise null (with &&). Don't forget to export.

Show example solution

function ErrorBox({ hasError }) {
  return hasError === true && <p className="error">An error occurred</p>;
}

export default ErrorBox;

Test yourself

When is the && pattern used?
- To store state
- To choose between two options
- To show only when a condition holds
- To update DOM
Show answer

To show only when a condition holds — && is ideal for one-sided conditional render.

&& operator

The && pattern: ____ condition && element.

Show answer

The && pattern: condition condition && element.

Match the && pattern

condition

Question
&&

Operator
element

Result
0

Risk

Next lesson: Early return

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies