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.
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.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite