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.
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>;// Bad - renders booleanreturn <div>{isVisible}</div>;// Good - use ternaryreturn <div>{isVisible ? <span>Visible</span> : null}</div>;Booleans are not valid as React children
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.
Replace direct boolean rendering with a ternary operator that returns either a React element or null:
// Bad - renders boolean
return <div>{isVisible}</div>;
// Good - use ternary
return <div>{isVisible ? <span>Visible</span> : null}</div>;When using the && operator, ensure the left side is a boolean, not a number:
// 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>;For complex conditions, make your intent explicit with clear boolean expressions:
// Clear and safe
return <div>{isLoading === true && <Spinner />}</div>;
// Or use a helper
const shouldShow = isLoading && !isError;
return <div>{shouldShow && <Spinner />}</div>;If using TypeScript, ensure children props are typed as ReactNode:
import { ReactNode } from "react";
interface Props {
children: ReactNode;
}
const MyComponent = ({ children }: Props) => {
return <div>{children}</div>;
};Ensure any component you're rendering returns JSX, not a boolean:
// 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;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.