February 22, 2025 / 461 /

Resolving the 'React.Children.only Expected to Receive a Single React Element Child' Error in Button Components

Mohammad Jamiu

Read Time 🕠 - 2mins

While working on a React project, I encountered the following error:


Error: React.Children.only expected to receive a single React element child.

This error occurred with the following code:

<Button className="bg-blue-600 hover:bg-blue-700" asChild>
  <Link href="#projects" className="flex items-center">
    View Projects
    <ArrowRight className="w-4 h-4 ml-2" />
  </Link>
</Button>

Problem:

The asChild prop in the Button component expects exactly one child element.

In the code above, the Button component has multiple children within the Link component (View Projects text and the ArrowRight icon), which causes the error.

Solution:

To resolve this issue, ensure that the Button component with the asChild prop wraps a single React element.

Here’s the corrected code:

<Button className="bg-blue-600 hover:bg-blue-700" asChild>
  <Link href="#projects" className="flex items-center">
    View Projects
    <ArrowRight className="w-4 h-4 ml-2" />
  </Link>
</Button>

In this corrected version, the Button component wraps a single Link component, which contains both the text and the ArrowRight icon.

This structure satisfies the requirement of having a single child element, resolving the error.

💡 Key Takeaway:

When using the asChild prop in a Button component, ensure it wraps only one React element.

This practice prevents the “React.Children.only expected to receive a single React element child” error.

FAQs:

What does the asChild prop do in a Button component?

The asChild prop allows the Button component to render another component (e.g., a Link) as its child, effectively adopting the child’s element type and props.
Why does the Button component with asChild require a single child element?

The Button component utilizes React.Children.only, a React utility that ensures only one child is passed.

If multiple children are provided, it throws an error to maintain consistency and prevent unexpected behavior.
How can I include multiple elements (e.g., text and icon) inside a Button with asChild?

Wrap the multiple elements inside a single parent component (such as a Link), and then pass this parent component as the single child to the Button with asChild.

By sticking to this structure, you can effectively use the asChild prop in Button components without encountering child-related errors.

Resolving the 'React.Children.only Expected to Receive a Single React Element Child' Error in Button Components

More For You ☄