Solutions to Fix “React.Children.only expected to receive single React element child”

Suppose you get the error message: “React.Children.only expected to receive single React element child” when working in your React application. This tutorial will show you how to fix it through some solutions such as: Using React Fragment, using Dom element. Read on it now.

Why do we have this error?

When we try to pass many child components to a component, but this parent component accepts only one child component. You will receive an error message: “React.Children.only expected to receive single React element child”.

Through the following example, you will see an error case:

import './App.css';
import React from 'react';

function Parent(props) {
  	return React.Children.only(props.children);
}

export default function App() {
    return (
        <Parent>
            <p>First children</p>
            <p>Second children</p>
        </Parent>
    );
}

Output:

You can see that the error occurs because the <Parent> element contains two child elements (two <p> tags). This violates the rule that a parent component can only have one and only one child.

How to fix the error “React.Children.only expected to receive single React element child”?

Check out the solutions below to solve this problem.

Using React Fragment

The first way to fix this error is using the React Fragment.

Syntax:

<> … </> 

Using React fragment will help you group all the child components together without changing the DOM structure of your application.

import './App.css';
import React from 'react';

function Parent(props) {
  	return React.Children.only(props.children);
}

export default function App() {
    return (
        <Parent>
            <>
                <p>First children</p>
                <p>Second children</p>
            </>
        </Parent>
    );
}

You can also use the syntax <React.Fragment>...</React.Fragment> instead of <> … </>. 

<> … </> can be thought of as a more concise representation of <React.Fragment>. These two uses of React Fragments are the same. However, one caveat when using <> … </> is that it does not support keys.

Using DOM element

Another way is to use the HTML tag to surround the elements. 

Some specific examples like using div, main, ul, etc.

In the following example, we use a pair of div tags to wrap all child components.

import './App.css';
import React from 'react';

function Parent(props) {
  	return React.Children.only(props.children);
}

export default function App() {
    return (
        <Parent>
            <div>
                <p>First children</p>
                <p>Second children</p>
            </div>
        </Parent>
    );
}

Pay attention when applying this method. In some cases, adding a div tag upsets CSS convention and the structure of HTML tags when displayed.

Summary

That’s all I want to cover in this post. The above solutions will help you fix the “React.Children.only expected to receive single React element child” error. Thank you for reading!

Maybe you are interested:

• Pass event and parameter onClick in React
• Set and Access state using a Dynamic key in React
• how to only call a function once in react

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