This JSX tag's 'children' prop expects single child of type 'Element', but multiple children were provided

avatar

Borislav Hadzhiev

Last updated: Apr 4, 2022

banner

Photo from Unsplash

This JSX tag's 'children' prop expects single child of type 'Element', but multiple children were provided #

To solve the error "This JSX tag's 'children' prop expects a single child of type 'Element', but multiple children were provided", use a fragment to wrap the children props passed to the component or type the component's children prop as React.ReactNode.

this jsx tags children prop expects single child

Here is an example of how the error occurs.

App.tsx
type HeaderProps = { children: JSX.Element; }; function Header(props: HeaderProps) { return <div>{props.children}</div>; } function App() { return ( <div> {/* ⛔️ This JSX tag's 'children' prop expects a single child of type 'Element', but multiple children were provided.ts(2746) */} <Header> <h1>Hello</h1> <h1>World</h1> </Header> </div> ); } export default App;

The issue here is - we typed the Header component's props to only take a single child of type JSX.Element, but we are passing multiple elements to it.

One way to solve the error is to use a fragment to wrap the component's children.

App.tsx
type HeaderProps = { children: JSX.Element; }; function Header(props: HeaderProps) { return <div>{props.children}</div>; } function App() { return ( <div> <Header> {/* 👇️ wrap in Fragment */} <> <h1>Hello</h1> <h1>World</h1> </> </Header> </div> ); } export default App;

We wrapped the multiple elements into a fragment, so we are only passing a single child element to the Header component, which solves the error.

An even better solution would be to type the component's children as React.ReactNode.

App.tsx
type HeaderProps = { children: React.ReactNode; }; function Header(props: HeaderProps) { return <div>{props.children}</div>; } function App() { return ( <div> <Header> <h1>Hello</h1> <h1>World</h1> </Header> </div> ); } export default App;

The React.ReactNode type is much wider than just JSX.Element.

The type is defined as:

index.d.ts
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

Now we can pass multiple children to the Header component without having to wrap them in a fragment.

Conclusion #

To solve the error "This JSX tag's 'children' prop expects a single child of type 'Element', but multiple children were provided", use a fragment to wrap the children props passed to the component or type the component's children prop 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.