How to fix Cannot render children without JSX in React

ReactINTERMEDIATEMEDIUMUpdated Dec 8, 2025· 104 views

This TypeScript error occurs when returning the children prop directly from a React component. React expects a valid JSX element return type, but ReactNode (which includes undefined) cannot be returned directly without wrapping.

Quick fix

Fixes Cannot render children without JSX

import { PropsWithChildren } from 'react';

function Wrapper({ children }: PropsWithChildren) {
  return <>{children}</>;
}
  1. Wrap children in a React fragment
  2. Use conditional rendering with null fallback
  3. Type children as ReactNode explicitly
  4. Avoid using JSX.Element for children type
react — error
import { PropsWithChildren } from 'react';
function Wrapper({ children }: PropsWithChildren) {
  return <>{children}</>;
}
Cannot render children without JSX

What this error means

This error appears when using TypeScript with React and attempting to return the children prop directly from a component. The issue stems from a type mismatch between what TypeScript expects as a valid JSX return type and what the children prop is typed as. In React with TypeScript, the children prop is typed as ReactNode, which includes ReactElement, strings, numbers, fragments, portals, booleans, null, and undefined. However, React components cannot return undefined as a valid render output—they must return null instead. When you try to return children directly (like "return children;"), TypeScript cannot guarantee the return type is valid JSX because children might be undefined. JSX.Element is a narrower type that TypeScript uses to validate what can be rendered as JSX. Since ReactNode is broader and includes non-renderable values like undefined, TypeScript throws an error when you attempt to return children without wrapping it in valid JSX syntax like a fragment.

Typical symptoms

  • TypeScript error: "Component cannot be used as a JSX component"
  • Error message stating return type is not a valid JSX element
  • Build fails when trying to return children prop directly
  • IDE shows red underlines on component return statement
  • Error mentions ReactNode is not assignable to Element
  • Component works in plain JavaScript but fails with TypeScript
  • Error specifically mentions children property in error message

Common causes

  1. Returning the children prop directly without wrapping it in JSX (e.g., "return children;")
  2. Type mismatch between ReactNode (which includes undefined) and JSX.Element
  3. Using PropsWithChildren but attempting to return children as-is
  4. Component signature allows children but return type cannot handle undefined
  5. Incorrectly typing children prop as JSX.Element instead of ReactNode
  6. Upgrade to React 18/19 with stricter TypeScript type checking
  7. Using React.FC with bare children return in newer TypeScript versions
  8. Attempting to pass through children in a wrapper component without proper JSX wrapping

How to fix "Cannot render children without JSX"

1Wrap children in a React fragment

The simplest solution is to wrap the children prop in a fragment when returning it directly:

typescript
import { PropsWithChildren } from 'react';

function Wrapper({ children }: PropsWithChildren) {
  return <>{children}</>;
}

This ensures the return type is always valid JSX, even if children is undefined. Fragments have no practical DOM overhead and will compile away in production.

2Use conditional rendering with null fallback

If you need to conditionally render children, explicitly handle the undefined case:

typescript
import { PropsWithChildren } from 'react';

function ConditionalWrapper({ isVisible, children }: PropsWithChildren<{ isVisible: boolean }>) {
  if (!isVisible) return null;
  return <>{children}</>;
}

Always return null (not undefined) for empty renders to satisfy TypeScript's JSX requirements.

3Type children as ReactNode explicitly

When manually typing props, always use ReactNode for children, not JSX.Element:

typescript
import { ReactNode } from 'react';

interface WrapperProps {
  children: ReactNode; // Correct: accepts strings, numbers, elements, etc.
  className?: string;
}

function Wrapper({ children, className }: WrapperProps) {
  return <div className={className}>{children}</div>;
}

ReactNode is the correct type for children as it represents all valid React child types including strings, numbers, and arrays.

4Avoid using JSX.Element for children type

JSX.Element is too restrictive for children and causes type errors:

typescript
// ❌ Wrong: JSX.Element doesn't accept strings or numbers
interface BadProps {
  children: JSX.Element;
}

// ✅ Correct: ReactNode accepts all valid children
interface GoodProps {
  children: ReactNode;
}

If you use JSX.Element, you'll get errors like "Text in JSX has the type 'string', but the expected type of 'children' is 'Element'."

5Use PropsWithChildren utility type

React provides a utility type that automatically adds children with the correct type:

typescript
import { PropsWithChildren } from 'react';

interface MyProps {
  title: string;
}

function Component({ title, children }: PropsWithChildren<MyProps>) {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
}

PropsWithChildren<T> returns T & { children?: ReactNode }, saving you from manually typing children.

6Update TypeScript and @types/react versions

Ensure you're using compatible versions to avoid type conflicts:

bash
npm install --save-dev typescript@latest @types/react@latest @types/react-dom@latest

TypeScript 5.1+ has improvements in how it infers types from React components. If using older versions, consider upgrading to get better type checking and fewer false positives.

7Verify component return type in complex cases

For complex conditional rendering, explicitly specify the return type:

typescript
import { ReactElement, PropsWithChildren } from 'react';

function ComplexWrapper({ condition, children }: PropsWithChildren<{ condition: boolean }>): ReactElement | null {
  if (condition) {
    return <div>{children}</div>;
  }
  return null;
}

This helps TypeScript understand your intent and provides better error messages if something goes wrong.

Advanced notes

React.FC Considerations: Prior to React 18, React.FC automatically included children in the props type. This was removed in React 18 to make components more explicit about whether they accept children. If migrating from older code, you may need to add PropsWithChildren explicitly.

Fragment Performance: While <>{children}</> creates a fragment element, React's reconciliation algorithm optimizes this away in most cases, resulting in negligible performance impact. Fragments are a zero-cost abstraction in production builds.

Type Narrowing: If you need to validate that children is a specific type (e.g., only a single element), use React.Children utilities or custom type guards:

typescript
import { Children, isValidElement } from 'react';

function SingleChildWrapper({ children }: PropsWithChildren) {
  const child = Children.only(children);
  if (!isValidElement(child)) {
    throw new Error('Child must be a valid React element');
  }
  return <div>{child}</div>;
}

Server Components: In React Server Components, the children prop works identically but be aware that client-only components may have different serialization constraints when passed as children to server components.

React 19 Changes: React 19 introduced stricter typing around props.children, especially when dealing with objects. If upgrading, ensure your components explicitly handle children prop typing and avoid returning bare children without JSX wrapping.

Frequently asked questions

What does "Cannot render children without JSX" mean?
This error appears when using TypeScript with React and attempting to return the children prop directly from a component. The issue stems from a type mismatch between what TypeScript expects as a valid JSX return type and what the children prop is typed as. In React with TypeScript, the children prop is typed as ReactNode, which includes ReactElement, strings, numbers, fragments, portals, booleans, null, and undefined.
How do I fix "Cannot render children without JSX"?
This TypeScript error occurs when returning the children prop directly from a React component. React expects a valid JSX element return type, but ReactNode (which includes undefined) cannot be returned directly without wrapping.
What causes "Cannot render children without JSX"?
Returning the children prop directly without wrapping it in JSX (e.g., "return children;") Type mismatch between ReactNode (which includes undefined) and JSX.Element Using PropsWithChildren but attempting to return children as-is
Is the "Cannot render children without JSX" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading