How to Type the children Prop in React with TypeScript

By the end of this page, you will understand what the children prop represents in React, when to use React.ReactNode, why a component cannot directly return just any ReactNode type in some TypeScript setups, and how to type wrapper components correctly using React.ReactNode, JSX.Element, or React.FC patterns.

What children means in React

In React, children is the content placed between a component's opening and closing tags.

<Aux>
  <div>Hello</div>
</Aux>

Here, the <div>Hello</div> part becomes the children prop of Aux.

The correct type for children

In TypeScript, the most common type for children is:

React.ReactNode

React.ReactNode is a broad type that includes:

• React elements
• strings
• numbers
• fragments
• arrays of nodes
• null
• undefined
• booleans

That makes it a good type for , because React allows all of these to be rendered.

Think of children as the contents of a box.

• The component is the box.
• Anything placed inside the box becomes children.
• React.ReactNode means "almost anything React knows how to display can go in this box."

Now think about the component's return value as what the factory is allowed to ship out.

• children can be many different things.
• But a JSX component is usually expected to return a proper React element or null.
• If TypeScript sees that your component might return undefined, it says, "This is not a reliable JSX component."

So:

• children type answers: What can go inside?
• return type answers: What does the component produce?

Basic children prop typing

type Props = {
  children: React.ReactNode;
};

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

This is the most common pattern.

Corrected version of your example

import * as React from 'react';

type AuxProps = {
  children: React.ReactNode;
};

const Aux = ({ children }: AuxProps): JSX.Element => {
  return <>{children}</>;
};

export default Aux;

Why this works

Trace through a small example

type BoxProps = {
  children: React.ReactNode;
};

function Box({ children }: BoxProps): JSX.Element {
  return <section>{children}</section>;
}

function App(): JSX.Element {
  return (
    <Box>
      <p>Hello</p>
    </Box>
  );
}

What happens step by step

1. App renders

React sees:

<Box>
  <p>Hello</p>
</Box>

Layout wrappers

A layout component often wraps pages and renders shared UI around page content.

<Layout>
  <Dashboard />
</Layout>

Modal components

A modal usually accepts any content as children.

<Modal>
  <form>...</form>
</Modal>

Card and panel components

Reusable UI containers often render children inside a styled box.

<Card>
  <p>Profile details</p>
</Card>

Context providers

Providers typically wrap part of the app and render descendant components through children.

<AuthProvider>
  
</>

Common patterns developers use

Wrapper components

The most common pattern is a wrapper that accepts children and returns JSX:

type Props = {
  children: React.ReactNode;
};

function Container({ children }: Props) {
  return <div className="container">{children}</div>;
}

Guard clauses

Sometimes a component only renders when children exists.

function MaybeWrap({ children }: { children?: React.ReactNode }) {
  if (!children) return null;
  return <div>{children}</div>;
}

Validation and fallback UI

1. Returning children directly when the inferred type is too broad

Broken example:

const Aux = (props: { children: React.ReactNode }) => props.children;

Why it can fail:

• TypeScript may infer the return type as React.ReactNode
• ReactNode can include undefined
• JSX components are often expected to return JSX.Element or null

Fix:

const Aux = ({ children }: { children: React.ReactNode }): JSX.Element => {
  return <>{children}</>;
};

2. Mistyping the closing tag

Broken example:

<Aux>
  

Related type choices

Quick reference

Type children

type Props = {
  children: React.ReactNode;
};

Optional children

type Props = {
  children?: React.ReactNode;
};

Safe wrapper component

function Wrapper({ children }: { children: React.ReactNode }): JSX.Element {
  return <>{children}</>;
}

With other props

type CardProps = {
  title: string;
  children: React.ReactNode;
};

With

What is the correct TypeScript type for React children?

Usually React.ReactNode. It covers most values React can render, including elements, strings, numbers, fragments, null, and arrays.

Why does returning props.children directly cause an error?

Because children is typed as ReactNode, and that type can include undefined. Some TypeScript React setups require JSX components to return a JSX element or null.

Should I use JSX.Element for children?

Usually no. JSX.Element is narrower and only allows a single JSX element. React.ReactNode is more flexible.

Is React.FC required to type children?

No. You can type props explicitly. React.FC is optional.

When should children be optional?

Make it optional when the component should still work without inner content.

• props — children is just a special prop passed into components.
• JSX — understanding how JSX becomes function calls helps explain how children is passed.
• React fragments — fragments let you return grouped children without extra DOM elements.
• React.FC — a common alternative way to type function components.
• PropsWithChildren — a utility type for adding children to your prop definitions.
• ReactElement — useful to compare with ReactNode when choosing types.
• optional props — helpful when children may or may not be provided.
• component composition — children is one of the main tools for composing reusable UI.