react.children.only expected to receive single react element child

react.children.only expected to receive single react element child is the error which we might have faced somehow or someday. This error often occur when we try to add multiple children, or you can say tags inside the JSX code. It often occurs when we put two tags or children inside the return() of any component in simple react codes. Also, you may face this error when you use some library which expects only one child.

You can solve this error using react fragment or using <div>.

Let’s take a simple example when this problem will occur:

import './App.css';

export default function App() {
  return (
    
      <button
        onClick={() => {
          console.log('Button 1 is clicked');
        }}
      >
        Click Me
      </button>
      <button
        onClick={() => {
          console.log('Button 2 is clicked');
        }}
      >
        Click Me 2
      </button>
    
  );
}

So in the above code, you can see we have an app component here, in this component we have two buttons. And as we know, return() only expect one element or child, but we have passed two then this error will occur.

let’s take another example, in which we will add another component here:

import React from 'react';

function Button(props) {
  
  return React.Children.only(props.child);
}

 function App() {
  return (
    <Button>
        <button onClick={() => {
            console.log('Button 1 clicked');
          }}
        >
          Click Me
        </button>
        <button onClick={() => {
            console.log('Button 2 clicked');
          }}
        >
          Click Me 2
        </button>
     
    </Button>
  );
}
export default App;

Here you can see a Button which is actually a function, in which we have to pass props. But here we have passed two buttons as props, which is not acceptable for <Button> since it needs only one child, we are passing two. So this will also throw the same error.

Solution

Now let’s see How can we actually solve this, We can solve this errors in two ways : (1) using react fragment (2) using <div>.

Let’s see first solution with React fragment:

import React from 'react';

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

export default function App() {
  return (
    <Buttons>
      <>
        <button onClick={() => {
            console.log('Button 1 clicked');
          }}
        >
          Click Me
        </button>
        <button onClick={() => {
            console.log('Button 2 clicked');
          }}
        >
          Click Me 2
        </button>
      </>
    </Buttons>
  );
}

As you can see, we have added another tag named <React.Fragment>, and we have wrapped the buttons inside the fragment. it is simple react fragment form, we can also use <></>. This is a syntactic sugar form of React fragment. react fragment simply wrap up the all elements and represents it as a single element to the React.

Another way is to use <div> instead of React fragment

import React from 'react';

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

export default function App() {
  return (
    <Button>
      <div>
        <button onClick={() => {
            console.log('Button 1 clicked');
          }}
        >
          Click Me
        </button>
        <button onClick={() => {
            console.log('Button 2 clicked');
          }}
        >
          Click Me 2
        </button>
      </div>
    </Button>
  );
}

As we can see, in the above code, we have wrapped all button elements inside the div. As we know, div can contain many elements in the HTML code, similarly, In JSX <div> will be passed as a single element in the prop, so code will run properly.

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.

Conclusion

So the simple conclusion is, this react.children.only expected to receive single react element child error is very basic and common, which can be removed by using simple fragment or <div>. React only needs one child to export to the component.