How to fix React.FC expects children prop to be defined in React

ReactBEGINNERLOWUpdated Dec 22, 2025· 113 views

Since React 18 and @types/react v18, React.FC no longer includes children in the props type by default. You must explicitly declare children in your props interface or use PropsWithChildren to accept child elements.

Quick fix

Fixes React.FC expects children prop to be defined

import React, { ReactNode } from 'react';

interface MyComponentProps {
  title: string;
  children: ReactNode;
}

const MyComponent: React.FC<MyComponentProps> = ({ title, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
};
  1. Explicitly add children to your props interface
  2. Use PropsWithChildren utility type
  3. Alternative: Remove React.FC and use standard function syntax
  4. For components that don't accept children
react — error
import React, { ReactNode } from 'react';
interface MyComponentProps {
  title: string;
  children: ReactNode;
}
const MyComponent: React.FC<MyComponentProps> = ({ title, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
};
React.FC expects children prop to be defined

What this error means

This TypeScript error occurs when using React.FC (or React.FunctionComponent) with components that accept children, but the children prop is not explicitly declared in the props type. Starting with @types/react v18 (corresponding to React 18), the FC type was changed to remove the implicit children prop that was previously included by default. This change was intentional and improves type safety by preventing components from accidentally accepting children they don't use. Previously, all FC components implicitly had a children prop even if they never rendered children, which could lead to silent bugs where children were passed but ignored. The error typically manifests when TypeScript reports that 'children' does not exist on the props type, or when trying to use props.children in a component typed with React.FC without explicitly including children in the props interface.

Typical symptoms

  • TypeScript error: Property 'children' does not exist on type 'PropsType'
  • Component typed with React.FC fails to compile when accessing props.children
  • Wrapper components that previously worked with React.FC now show type errors
  • Migration from React 17 to React 18 breaks existing FC components that use children
  • IDE shows red underlines when trying to pass children to React.FC components

Common causes

  1. Using React.FC or React.FunctionComponent without explicitly declaring children in props type
  2. Upgrading from @types/react v17 to v18 where implicit children was removed
  3. Attempting to access props.children in a React.FC component without typing it
  4. Using legacy React.FC patterns that relied on implicit children prop inclusion
  5. Not updating component types after upgrading to React 18 and TypeScript 5+

How to fix "React.FC expects children prop to be defined"

1Explicitly add children to your props interface

The most straightforward solution is to explicitly declare children in your props type:

tsx
import React, { ReactNode } from 'react';

interface MyComponentProps {
  title: string;
  children: ReactNode;
}

const MyComponent: React.FC<MyComponentProps> = ({ title, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
};

Use ReactNode as the type for children since it accepts all valid React child types (elements, strings, numbers, fragments, portals, etc.).

2Use PropsWithChildren utility type

React provides a PropsWithChildren utility type that wraps your props and adds children:

tsx
import React, { PropsWithChildren } from 'react';

interface MyComponentProps {
  title: string;
}

const MyComponent: React.FC<PropsWithChildren<MyComponentProps>> = ({
  title,
  children
}) => {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
};

This approach keeps your props interface clean while explicitly declaring that children are accepted.

3Alternative: Remove React.FC and use standard function syntax

Many developers now prefer to avoid React.FC altogether and use regular function syntax:

tsx
import React, { ReactNode } from 'react';

interface MyComponentProps {
  title: string;
  children: ReactNode;
}

function MyComponent({ title, children }: MyComponentProps) {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
}

// Or with arrow function
const MyComponent = ({ title, children }: MyComponentProps) => {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
};

This approach is more explicit and is the pattern recommended by many in the React community, including the React team.

4For components that don't accept children

If your component should NOT accept children, simply don't include children in the props type. React.FC will correctly prevent children from being passed:

tsx
import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

// TypeScript will error if you try:
// <Button label="Click me" onClick={handleClick}>Invalid children</Button>

This is actually one of the benefits of the change—it prevents accidentally passing children to components that don't use them.

Advanced notes

Why the change was made:
The removal of implicit children from React.FC was a deliberate decision to improve type safety. Previously, every FC component accepted children even if it never used them, which could lead to confusing behavior where children were passed but silently ignored. By making children explicit, TypeScript can now catch these mismatches at compile time.

TypeScript 5.1+ improvements:
As of TypeScript 5.1, React.FC has been further improved to accept more return types (string, number, undefined) without errors, making it more aligned with standard function components. The team at TypeScript and React now consider React.FC "fine" to use, whereas it was previously discouraged due to various limitations.

Migration strategy for large codebases:
If you're upgrading a large codebase from React 17 to 18, you can create a temporary alias to ease migration:

tsx
// types/react-legacy.ts
import { FC, PropsWithChildren } from 'react';

export type LegacyFC<P = {}> = FC<PropsWithChildren<P>>;

Then gradually migrate components from LegacyFC to properly typed FC components, making children explicit only where needed.

Optional children:
If children should be optional, use:

tsx
interface Props {
  children?: ReactNode;
}

This allows the component to work with or without children, which is useful for wrapper components that have default content.

Frequently asked questions

What does "React.FC expects children prop to be defined" mean?
FunctionComponent) with components that accept children, but the children prop is not explicitly declared in the props type. Starting with @types/react v18 (corresponding to React 18), the FC type was changed to remove the implicit children prop that was previously included by default. This change was intentional and improves type safety by preventing components from accidentally accepting children they don't use.
How do I fix "React.FC expects children prop to be defined"?
Since React 18 and @types/react v18, React.FC no longer includes children in the props type by default. You must explicitly declare children in your props interface or use PropsWithChildren to accept child elements.
What causes "React.FC expects children prop to be defined"?
Using React.FC or React.FunctionComponent without explicitly declaring children in props type Upgrading from @types/react v17 to v18 where implicit children was removed Attempting to access props.children in a React.FC component without typing it
Is the "React.FC expects children prop to be defined" error serious?
It is a low-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading