React: Type {children: Element} has no properties in common with type IntrinsicAttributes

avatar

Borislav Hadzhiev

Last updated: Mar 21, 2022

banner

Photo from Unsplash

React: Type {children: Element} has no properties in common with type IntrinsicAttributes #

The React.js error "Type {children: Element} has no properties in common with type IntrinsicAttributes" occurs when we try to pass a children prop to a component that doesn't take any props. To solve the error define and type the props on the component.

type has no properties in common

Here is an example of how the error occurs.

App.tsx
const Box = () => { // 👈️ takes no props return ( <div> <p>Hello world</p> </div> ); }; const App = () => { return ( <div className="App"> {/* ⛔️ Error: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'. ts(2559) */} <Box> <span>Test</span> </Box> </div> ); }; export default App;

Notice that the Box component doesn't take any props, but we are trying to pass a children prop to it.

When a component is being used with an opening and closing tag, everything between the tags is passed to the component as the children prop.
App.tsx
<MyComponent> Some children here </MyComponent>

One way to solve the error is to use the component as <Box /> if it doesn't need to take any children.

App.tsx
const Box = () => { return ( <div> <p>Hello world</p> </div> ); }; const App = () => { return ( <div className="App"> <Box /> </div> ); }; export default App;

This solves the error because no children props are being passed.

However, if your component has to take a children prop, you have type it when declaring the component.

App.tsx
import React from 'react'; type BoxProps = { children: React.ReactNode; // 👈️ type children }; const Box = (props: BoxProps) => { return <div>{props.children}</div>; }; const App = () => { return ( <div className="App"> <Box> <span>Hello</span> <span>Test</span> </Box> </div> ); }; export default App;

We defined and typed a children prop on the Box component which solves the error.

Now the Box component can be passed children and render them.

Make sure your component defines all of the props it has to take.

If you don't want to explicitly have to type the props and just want to turn off type checking, you can set the props object to any type.

App.tsx
const Box = (props: any) => { // 👈️ turns off type checking for props return <div>{props.children}</div>; }; const App = () => { return ( <div className="App"> <Box> <span>Hello</span> <span>Test</span> </Box> </div> ); }; export default App;

Anytime you use a component as:

App.tsx
<MyComponent> Some children </MyComponent>

You have to define and type the children property on the specific component.

App.tsx
import React from 'react'; type BoxProps = { children: React.ReactNode; // 👈️ define children prop }; const Box = (props: BoxProps) => { return <div>{props.children}</div>; }; const App = () => { return ( <div className="App"> <Box> <span>Hello</span> <span>Test</span> </Box> </div> ); }; export default App;

If you don't need to pass any children to your component, simply use the component as <MyComponent />.

App.tsx
const Box = () => { return <div>Hello world</div>; }; const App = () => { return ( <div className="App"> <Box /> </div> ); }; export default App;

Conclusion #

The React.js error "Type {children: Element} has no properties in common with type IntrinsicAttributes" occurs when we try to pass a children prop to a component that doesn't take any props. To solve the error define and type the props on 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.