# How to Access and Utilize Children in React Stateless Functional Components with TypeScript

> Learn how to use React children in stateless functional components with TypeScript. Effortlessly access and render child elements using props.children or destructuring.

- Repository: [Meta/react](https://github.com/facebook/react)
- Tags: how-to-guide
- Published: 2026-02-16

---

**Use the `children?: React.ReactNode` type in your props interface, or wrap your props with `PropsWithChildren<T>`, then access the value via destructuring or `props.children` to render or manipulate child elements.**

When building reusable UI components in the `facebook/react` repository, accessing `children` in stateless functional components with TypeScript requires understanding both the internal type system and the public API surface. React stores children as a special property on the props object, typed as `ReactNode` to accommodate strings, elements, fragments, and other valid render targets.

## How React Handles Children Internally

React treats anything passed between a component’s opening and closing tags as **`props.children`**. According to the source code in [`packages/shared/ReactTypes.js`](https://github.com/facebook/react/blob/main/packages/shared/ReactTypes.js), this value is typed as **`ReactNode`**, a comprehensive union that includes `ReactElement`, `ReactFragment`, `ReactPortal`, `string`, `number`, and more【[ReactTypes – ReactNode](https://github.com/facebook/react/blob/main/packages/shared/ReactTypes.js#L14-L22)】.

During JSX compilation, the runtime assigns the `children` field on the props object. In [`packages/react/src/jsx/ReactJSXElement.js`](https://github.com/facebook/react/blob/main/packages/react/src/jsx/ReactJSXElement.js) (lines 689-704), the JSX factory handles the creation of the `props` object and explicitly sets `props.children` based on the content between your component tags【[ReactJSXElement – assigning children](https://github.com/facebook/react/blob/main/packages/react/src/jsx/ReactJSXElement.js#L689-L704)】.

## Typing Children in TypeScript Functional Components

TypeScript offers three primary patterns for typing `children` in stateless functional components. All compile to the same runtime shape—an object with a `children` property—but offer different levels of convenience and control.

### Explicit Prop Interface with React.ReactNode

The most explicit approach declares `children` directly in your props interface using `React.ReactNode`. This method provides full control over the prop shape and makes it clear which components accept children.

```typescript
import React from 'react';

interface CardProps {
  title: string;
  // Optional children typed as ReactNode
  children?: React.ReactNode;
}

const Card = ({ title, children }: CardProps) => (
  <section className="card">
    <h2>{title}</h2>
    <div className="card-body">{children}</div>
  </section>
);

```

### Using the PropsWithChildren Utility

React provides the **`PropsWithChildren<T>`** generic utility, which takes your existing props interface and automatically adds the optional `children?: ReactNode` field. This is ideal when you want to reuse a base props type without manually rewriting the children declaration.

```typescript
import React, { PropsWithChildren } from 'react';

interface ButtonGroupProps {
  orientation: 'horizontal' | 'vertical';
}

// PropsWithChildren adds children?: ReactNode automatically
const ButtonGroup = ({
  orientation,
  children,
}: PropsWithChildren<ButtonGroupProps>) => (
  <div role="group" className={`group-${orientation}`}>
    {children}
  </div>
);

```

### React.FC and Implicit Children

The **`React.FC<T>`** (or `React.FunctionComponent<T>`) type implicitly includes `children?: ReactNode` and provides typings for `propTypes`, `defaultProps`, and `displayName`. While convenient, this approach is sometimes discouraged in modern React because it forces the `children` prop even when a component never uses it, and it can obscure the explicit props interface.

```typescript
import React from 'react';

interface ListProps {
  items: string[];
}

// React.FC implicitly includes children
const List: React.FC<ListProps> = ({ items, children }) => (
  <ul>
    {items.map(item => <li key={item}>{item}</li>)}
    {children}
  </ul>
);

```

## Working with Children Programmatically

When you need to iterate, count, or filter children, React provides the **`React.Children`** API. These utilities live in [`packages/react/src/ReactChildren.js`](https://github.com/facebook/react/blob/main/packages/react/src/ReactChildren.js) and are built on the internal `mapIntoArray` routine, which normalizes any shape of children into a flat array before processing【[ReactChildren – public helpers](https://github.com/facebook/react/blob/main/packages/react/src/ReactChildren.js#L354-L432)】.

This API guarantees type-safe iteration regardless of whether `children` is a single element, an array, a fragment, or a nested combination.

```typescript
import React from 'react';

interface ListProps {
  items: string[];
  children?: React.ReactNode;
}

const List: React.FC<ListProps> = ({ items, children }) => (
  <ul>
    {items.map(item => <li key={item}>{item}</li>)}
    {/* Safely map over children regardless of their structure */}
    {React.Children.map(children, (child, index) => (
      <li key={`child-${index}`}>{child}</li>
    ))}
  </ul>
);

```

The `React.Children` utilities handle edge cases like `null`, `undefined`, and nested fragments that would otherwise require manual `Array.isArray` checks in userland code.

## Summary

- React stores children as **`props.children`**, typed internally as `ReactNode` in [`packages/shared/ReactTypes.js`](https://github.com/facebook/react/blob/main/packages/shared/ReactTypes.js).
- In TypeScript, declare children using **`React.ReactNode`** in your interface, or use **`PropsWithChildren<T>`** to automatically add the optional children field.
- **`React.FC`** implicitly includes children but may force the prop when unneeded; explicit interfaces are often preferred.
- Use **`React.Children.map`**, **`forEach`**, and **`toArray`** from [`packages/react/src/ReactChildren.js`](https://github.com/facebook/react/blob/main/packages/react/src/ReactChildren.js) to safely traverse or manipulate children without manual type checking.

## Frequently Asked Questions

### What is the best type for children in React TypeScript?

**`React.ReactNode`** is the most comprehensive and recommended type. It accepts strings, numbers, elements, fragments, portals, and arrays of these types, matching the internal `ReactNode` union defined in [`packages/shared/ReactTypes.js`](https://github.com/facebook/react/blob/main/packages/shared/ReactTypes.js). Use `React.ReactElement` only when you specifically require a single React element.

### Should I use React.FC for typing functional components?

While `React.FC` (or `React.FunctionComponent`) automatically includes `children` and provides typings for `propTypes` and `defaultProps`, many teams now avoid it because it implicitly adds `children` even when a component doesn't accept or use them. Explicit interfaces with `React.ReactNode` or `PropsWithChildren` offer clearer contracts and better documentation.

### How do I iterate over children in a type-safe way?

Use **`React.Children.map`** or **`React.Children.forEach`** instead of direct array methods. These utilities, implemented in [`packages/react/src/ReactChildren.js`](https://github.com/facebook/react/blob/main/packages/react/src/ReactChildren.js), normalize any child structure—single elements, arrays, fragments, or nested combinations—into a flat array before iteration. This prevents runtime errors when `children` is unexpectedly a single element rather than an array.

### Where does React store the children prop internally?

React stores children as the **`children`** property on the component's props object. During JSX compilation, the runtime assigns this value in [`packages/react/src/jsx/ReactJSXElement.js`](https://github.com/facebook/react/blob/main/packages/react/src/jsx/ReactJSXElement.js) (lines 689-704). The type definition for valid children values lives in [`packages/shared/ReactTypes.js`](https://github.com/facebook/react/blob/main/packages/shared/ReactTypes.js) as the `ReactNode` union type, which the TypeScript definitions mirror in the public API.