Suggest an edit

Improve this article

Refine the answer for “What is the React.ReactNode type for?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What `React.ReactNode` is

`React.ReactNode` is a **universal type for any valid React content**
that can be **rendered inside JSX**.

It describes everything React can "draw" in the tree:

- elements (`<div />`, `<Component />`),
- strings and numbers,
- booleans and `null` / `undefined` (they render nothing),
- arrays of the same kinds of entities,
- `React.Fragment`.

---

## 1. Formal definition (simplified)

So `React.ReactNode` is "everything React can accept as a child element".

---

## 2. Where it's used

### 1) For `children`

The most common use:

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

function Card({ children }: Props) {
  return <div className="card">{children}</div>;
}
```

Now `Card` can be passed **any JSX**:

```javascript
<Card>
  <h1>Title</h1>
  <p>Text</p>
  <button>Button</button>
</Card>
```

---

### 2) For content that can be JSX, a string, or a number

```javascript
type Props = {
  label: React.ReactNode; // can be text, an icon, JSX
};

function Button({ label }: Props) {
  return <button>{label}</button>;
}

<Button label="Save" />
<Button label={<SaveIcon />} />
<Button label={42} />
```

---

### 3) For lists and arrays of JSX elements

```javascript
const list: React.ReactNode[] = [
  <li key="1">One</li>,
  <li key="2">Two</li>,
];
```

---

## 3. Difference from other types

| Type | What it describes | Example use |
|---|---|---|
| `React.ReactNode` | **Any** content React can render | `children`, `content`, `label` |
| `React.ReactElement` | Only **one specific React element** | `<div />`, `<Component />` |
| `JSX.Element` | The same as `ReactElement` (the type of a JSX result) | The value a component returns |
| `ReactNode[]` | An array of nodes | Lists, fragments |

Commonly:

- **a component's return value**: `JSX.Element` or `ReactElement`
- **composition props (children)**: `React.ReactNode`

---

## 4. Examples of the differences

```javascript
function A(): JSX.Element {
  return <div>Ok</div>; // the component returns a JSX.Element
}

function B({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>; // accepts any content
}
```

---

## 5. Why not `JSX.Element` for children

`JSX.Element` is too narrow a type: it doesn't include strings, numbers, and `null`.

```javascript
// Error if you use JSX.Element
function Title({ children }: { children: JSX.Element }) {
  return <h1>{children}</h1>;
}

// Correct
function Title({ children }: { children: React.ReactNode }) {
  return <h1>{children}</h1>;
}

<Title>Text</Title>; // a string is also a ReactNode
```

---

## 6. When it's better NOT to use `ReactNode`

- If a **specific type** is expected (for example, a render-prop function), it's better to specify `() => ReactNode`.
- If the component should accept **only an element**, not a string, use `ReactElement`.

```javascript
type Props = {
  trigger: React.ReactElement; // we expect a single JSX element
};
```

---

## Summary

| Parameter | `React.ReactNode` |
|---|---|
| What it describes | Everything that can be rendered in React |
| Includes | elements, strings, numbers, `null`, `undefined`, `boolean`, arrays |
| Often used for | `children`, `label`, `content`, `slot` |
| Doesn't include | functions, objects, promises (they can't be rendered directly) |
| Alternative | `ReactElement`, `JSX.Element` - if you need only a single element |

---

> In short:
> `React.ReactNode` is **"everything React can draw"**.
> Use it for `children` and any props that can hold **any JSX, text, or number**.
>
> If you want to allow **only a single React element**, use `ReactElement`.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts575 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.