How to fix Booleans are not valid as React children in React

ReactBEGINNERMEDIUMUpdated Dec 10, 2025· 111 views

This error occurs when you attempt to render a boolean value directly as a child in your React component. While React technically allows booleans in the JSX tree, rendering them directly or using incorrect conditional patterns can cause warnings and unexpected behavior.

Quick fix

Fixes Booleans are not valid as React children

// Bad - renders boolean
return <div>{isVisible}</div>;

// Good - use ternary
return <div>{isVisible ? <span>Visible</span> : null}</div>;
  1. Use ternary operator for conditional rendering
  2. Fix && operator with numeric values
  3. Use explicit boolean checks
  4. Type your children properly in TypeScript
react — error
// Bad - renders boolean
return <div>{isVisible}</div>;
// Good - use ternary
return <div>{isVisible ? <span>Visible</span> : null}</div>;
Booleans are not valid as React children

What this error means

React does not render boolean values (true or false) as visible output. When you try to render a boolean directly in JSX, React treats it as an empty node similar to null or undefined. This error typically appears when you use conditional rendering patterns incorrectly, such as rendering the result of a boolean expression directly instead of using it to control what gets rendered. The issue usually arises from two scenarios: attempting to render a boolean value directly in JSX, or using the logical AND (&&) operator incorrectly with numeric values on the left side, which can render unexpected values.

Typical symptoms

  • Console warning: "Booleans are not valid as React children"
  • Nothing renders where you expected content to appear
  • Using messageCount && <Component /> renders "0" instead of nothing
  • Boolean props passed to JSX elements trigger warnings

Common causes

  1. Rendering a boolean variable directly in JSX like {isVisible}
  2. Using && operator with a number on the left side (e.g., count && <span>Items</span>) which renders the number instead of the component
  3. Passing boolean values as JSX children without converting them to valid React elements
  4. Incorrectly using boolean logic that evaluates to true or false in the render expression

How to fix "Booleans are not valid as React children"

1Use ternary operator for conditional rendering

Replace direct boolean rendering with a ternary operator that returns either a React element or null:

jsx
// Bad - renders boolean
return <div>{isVisible}</div>;

// Good - use ternary
return <div>{isVisible ? <span>Visible</span> : null}</div>;
2Fix && operator with numeric values

When using the && operator, ensure the left side is a boolean, not a number:

jsx
// Bad - renders 0 when count is 0
return <div>{count && <span>Items: {count}</span>}</div>;

// Good - convert to boolean
return <div>{count > 0 && <span>Items: {count}</span>}</div>;
3Use explicit boolean checks

For complex conditions, make your intent explicit with clear boolean expressions:

jsx
// Clear and safe
return <div>{isLoading === true && <Spinner />}</div>;

// Or use a helper
const shouldShow = isLoading && !isError;
return <div>{shouldShow && <Spinner />}</div>;
4Type your children properly in TypeScript

If using TypeScript, ensure children props are typed as ReactNode:

tsx
import { ReactNode } from "react";

interface Props {
  children: ReactNode;
}

const MyComponent = ({ children }: Props) => {
  return <div>{children}</div>;
};
5Verify component exports return valid JSX

Ensure any component you're rendering returns JSX, not a boolean:

jsx
// Bad - function returns boolean
const Badge = (isActive) => isActive; // Returns true/false

// Good - function returns JSX
const Badge = (isActive) => isActive ? <span className="badge">Active</span> : null;

Advanced notes

React's reconciliation algorithm allows booleans, null, and undefined as valid node types internally, but they render as empty nodes in the output. This design choice prevents common bugs when using conditional rendering. When you encounter this error, it's usually a sign that your conditional logic needs adjustment rather than a fundamental React limitation.

In React fragments and arrays, the same rules apply—each element in the array should be a valid React element, string, number, or null/undefined, never a raw boolean. If you're generating dynamic arrays of content, filter or map them before rendering to ensure you're not accidentally including boolean values.

Linting tools like ESLint with the jsx-no-comment-textnodes rule can help catch these issues during development. If you're using TypeScript, type checking with ReactNode will guide you toward the correct patterns.

Frequently asked questions

What does "Booleans are not valid as React children" mean?
React does not render boolean values (true or false) as visible output. When you try to render a boolean directly in JSX, React treats it as an empty node similar to null or undefined. This error typically appears when you use conditional rendering patterns incorrectly, such as rendering the result of a boolean expression directly instead of using it to control what gets rendered.
How do I fix "Booleans are not valid as React children"?
This error occurs when you attempt to render a boolean value directly as a child in your React component. While React technically allows booleans in the JSX tree, rendering them directly or using incorrect conditional patterns can cause warnings and unexpected behavior.
What causes "Booleans are not valid as React children"?
Rendering a boolean variable directly in JSX like {isVisible} Using && operator with a number on the left side (e.g., count && <span>Items</span>) which renders the number instead of the component Passing boolean values as JSX children without converting them to valid React elements
Is the "Booleans are not valid as React children" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading