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

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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.

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;

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.

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;

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.

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 FunctionComponent interface takes a type for the props object using a generic.

An easy way to think about it is - we are passing a parameter that types theprops 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.

Conclusion #

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.

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.