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

avatar

Borislav Hadzhiev

Mon Apr 04 20222 min read

banner

Photo by Andi Rieger

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 are able to pass multiple children to the Header component without having to wrap them in a fragment.

Use the search field on my Home Page to filter through my more than 1,000 articles.