This JSX tag’s ‘children’ prop expects single child of type ‘Element’, but multiple children were provided – How to fix this error?

Suppose you get the error: “This JSX tag’s ‘children’ prop expects single child of type ‘Element’, but multiple children were provided” when working in your React application. Let’s find out the solution to this problem in this article.

What does this error mean?

We passed multiple elements to the Header even though we typed its component props to take only one child element of JSX.Element type – This is the cause of the error.

See the following example for a better understanding:

import React from 'react';

type DemoProps = {
  	children: JSX.Element;
};
  
function Demo(props: DemoProps) {
  	return <h1>{props.children}</h1>;
}

export default function Home() {
    return (
        <div>
            <Demo>
                <p>First children component</p>
                <p>Second children component</p>
            </Demo>
        </div>
    );
}

Error:

Demo component takes only a single child element of JSX.Element type. However, we pass into it two child components which are two <p></p> tags. That’s why you can see the error message above.

How to fix the error “This JSX tag’s ‘children’ prop expects single child of type ‘Element’, but multiple children were provided”?

I give you two methods to solve this error.

Use the React.Fragment

With React fragment, you can group all the child components together without worrying about the changes of DOM structure in your application. Because the DOM structure is guaranteed not to be affected when you use the React fragment.

Syntax:

<> … </> 

Take a look at this example:

import React from 'react';

type DemoProps = {
  	children: JSX.Element;
};
  
function Demo(props: DemoProps) {
  	return <h1>{props.children}</h1>;
}

export default function Home() {
    return (
        <div>
            <Demo>
                <>
                    <p>First children component</p>
                    <p>Second children component</p>
                </>
            </Demo>
        </div>
    );
}

Note that the <React.Fragment> ... </React.Fragment> syntax can be used as an alternative to <>… </>.

Using the above two syntaxes gives the same result. Users often use <>… </> as a shortened type of <React.Fragment> ... </React.Fragment>. However when using <>… </> you will not be able to use keys because this syntax does not support doing that.

Type the children component as React.ReactNode

Another way to help you to solve this problem is to use the React.ReactNode to set the type for the child component.

You can pass multiple child components into a parent component when React.ReactNode is used. Now you don’t need to use React Fragment to wrap all the children.

import React from 'react';

type DemoProps = {
  	children: React.ReactNode;
};

function Demo(props: DemoProps) {
  	return <h1>{props.children}</h1>;
}

export default function Home() {
    return (
        <div>
            <Demo>
                <p>First children component</p>
                <p>Second children component</p>
            </Demo>
        </div>
    );
}

Summary

The error “This JSX tag’s ‘children’ prop expects single child of type ‘Element’, but multiple children were provided” has been solved. I hope the information in this post is helpful to you. Thanks for reading.

Maybe you are interested:

• How To Fix Module not found: Can’t resolve ‘@date-io/date-fns’
• Expected corresponding JSX closing tag error in React – How to fix it?
• Adjacent JSX elements must be wrapped in an enclosing tag

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js