How to fix Cannot render children without JSX in React

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

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.

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

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.

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

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.

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

// ❌ 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'."

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

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.

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

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.

For complex conditional rendering, explicitly specify the return type:

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.