React.js: Property 'children' does not exist on type 'X'

avatar
Borislav Hadzhiev

Last updated: Feb 29, 2024
3 min

banner

# React.js: Property 'children' does not exist on type 'X'

The React.js error "Property 'children' does not exist on type" occurs when we try access the children property in a component for which we haven't typed the prop.

To solve the error, type the children prop in the component as React.ReactNode.

property-children-does-not-exist-on-type

Here is an example of how the error occurs.

App.tsx
type BoxProps = { name: string; country: string; }; // ๐Ÿ‘†๏ธ forgot to type `children` property const Box = (props: BoxProps) => { return ( <div> <h1>{props.name}</h1> <h1>{props.country}</h1> {/* โ›”๏ธ Error: Property 'children' does not exist on type 'BoxProps'.ts(2339) */} {props.children} </div> ); }; const App = () => { return ( <div> {/* โ›”๏ธ Property 'children' does not exist on type 'IntrinsicAttributes & BoxProps'.ts(2322) */} <Box name="James Doe" country="Germany"> <h1>Hello</h1> <h1>World</h1> </Box> </div> ); }; export default App;

The Box component tries to access the children property on the props object, but has not defined a type for it in the BoxProps type alias.

# Type the children property as React.ReactNode

To solve the error, type the children property as React.ReactNode.

App.tsx
import React from 'react'; type BoxProps = { name: string; country: string; children: React.ReactNode; // ๐Ÿ‘ˆ๏ธ added type for children }; const Box = (props: BoxProps) => { return ( <div> <h1>{props.name}</h1> <h1>{props.country}</h1> {props.children} </div> ); }; const App = () => { return ( <div> <Box name="James Doe" country="Germany"> <h1>Hello</h1> <h1>World</h1> </Box> </div> ); }; export default App;

type children property as react react node

The code for this article is available on GitHub

Now we are able to access the children property in the Box component.

We are also able to pass a children prop to it in our App component.

# Using a self-closing tag for the component

If you didn't intend to pass children to the Box component, you should use the component as <Box myProp="some value" /> and not <Box>Some children</Box>.

Every time you use a component with an opening and a closing tag, you pass a children prop to it.

If you didn't intend to do that, use a self-closing tag.

App.tsx
type BoxProps = { name: string; country: string; }; const Box = ({name, country}: BoxProps) => { return ( <div> <h1>{name}</h1> <h1>{country}</h1> </div> ); }; const App = () => { return ( <div> {/* ๐Ÿ‘‡๏ธ No children props passed (self-closing tag) */} <Box name="James Doe" country="Germany" /> </div> ); }; export default App;

You can also use destructuring to avoid having to access properties on the props object every time.

App.tsx
import React from 'react'; type BoxProps = { name: string; country: string; children: React.ReactNode; }; // ๐Ÿ‘‡๏ธ destructuring properties of the props object const Box = ({name, country, children}: BoxProps) => { return ( <div> <h1>{name}</h1> <h1>{country}</h1> {children} </div> ); }; const App = () => { return ( <div> <Box name="James Doe" country="Germany"> <h1>Hello</h1> <h1>World</h1> </Box> </div> ); }; export default App;
The code for this article is available on GitHub

# Using the any type to disable type checking

If you don't know the type of all of the props the component takes and want to disable type checking, use the any type.

App.tsx
// ๐Ÿ‘‡๏ธ `any` disables type checking const Box = ({name, country, children}: any) => { return ( <div> <h1>{name}</h1> <h1>{country}</h1> {children} </div> ); }; const App = () => { return ( <div> <Box name="James Doe" country="Germany"> <h1>Hello</h1> <h1>World</h1> </Box> </div> ); }; export default App;

We set the type of the props object to any, which effectively disables type checking.

This means that we can access any property on the props object without getting a type-checking error, but we also don't take advantage of TypeScript.

If you get the error Type {children: Element} has no properties in common with type IntrinsicAttributes, click on the link and follow the instructions.

# Using React.FunctionComponent

You might also see examples that use the built-in React.FunctionComponent type.

App.tsx
import React from 'react'; type BoxProps = { name: string; country: string; children: React.ReactNode; }; // ๐Ÿ‘‡๏ธ using React.FunctionComponent const Box: React.FunctionComponent<BoxProps> = ({name, country, children}) => { return ( <div> <h1>{name}</h1> <h1>{country}</h1> {children} </div> ); }; const App = () => { return ( <div> <Box name="James Doe" country="Germany"> <h1>Hello</h1> <h1>World</h1> </Box> </div> ); }; export default App;
The code for this article is available on GitHub

The FunctionComponent interface takes a type for the props object using a generic.

An easy way to think about it is that we are passing a parameter that types the props object to the FunctionComponent interface.

Using the FunctionComponent type is very similar to directly typing the props object like we previously did, but it also sets the return type of the component.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev