React.Children.only expected to receive single React element child

avatar

Borislav Hadzhiev

Last updated: Apr 5, 2022

banner

Check out my new book

React.Children.only expected to receive single React element child #

The error "React.Children.only expected to receive single React element child" occurs when we pass multiple child elements to a component that expects only a single React element child. To solve the error, wrap the elements in a React fragment or an enclosing div.

react children only expected receive single child

Here is an example of how th error occurs.

App.js
import React from 'react'; function Button(props) { // 👇️ expects single child element return React.Children.only(props.children); } export default function App() { return ( <Button> <button onClick={() => { console.log('Button clicked'); }} > Click </button> <button onClick={() => { console.log('Button clicked'); }} > Click </button> </Button> ); }

The Button element expects to be passed a single child element, but we are passing it 2 child elements at the same level.

We can use a React fragment to solve the error.

App.js
import React from 'react'; function Button(props) { // 👇️ expects single child element return React.Children.only(props.children); } export default function App() { return ( <Button> <> <button onClick={() => { console.log('Button clicked'); }} > Click </button> <button onClick={() => { console.log('Button clicked'); }} > Click </button> </> </Button> ); }

Fragments are used when we need to group a list of children without adding extra nodes to the DOM.

You might also see the more verbose syntax of fragments being used.

App.js
import React from 'react'; function Button(props) { // 👇️ expects single child element return React.Children.only(props.children); } export default function App() { return ( <Button> <React.Fragment> <button onClick={() => { console.log('Button clicked'); }} > Click </button> <button onClick={() => { console.log('Button clicked'); }} > Click </button> </React.Fragment> </Button> ); }

The two examples above achieve the same result - they group the list of children elements without adding extra nodes to the DOM.

The more concise syntax is more commonly used now that most code editors support it.

An alternative solution is to wrap the child elements in another DOM element, e.g. a div.

App.js
import React from 'react'; function Button(props) { // 👇️ expects single child element return React.Children.only(props.children); } export default function App() { return ( <Button> <div> <button onClick={() => { console.log('Button clicked'); }} > Click </button> <button onClick={() => { console.log('Button clicked'); }} > Click </button> </div> </Button> ); }

This solves the error because we are now passing a single child element to the Button component.

This approach only works when adding an extra div doesn't break your layout, otherwise use a fragment because fragments don't add any extra markup to the DOM.

This is needed because the Button component uses the React.Children.only function to verify that the children prop only has one child and returns it. Otherwise the method throws an error.

The React.Children.only method is often used in third party libraries to ensure that the consumer of the API only provides a single child element when using the component.

To solve the error "React.Children.only expected to receive single React element child", you either have to provide a single element as a child prop to the component or wrap your multiple elements with a React fragment.

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.