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

[gowdruNikhil]

Hi i have created a new react app using

npx create-react-app my-app
cd my-app
npm start

and used installed react-gamepad, updated app.js file as below code

import React, { Component } from 'react';
import Gamepad from 'react-gamepad'
import logo from './logo.svg';
import './App.css';

class App extends Component {
  connectHandler(gamepadIndex) {
    console.log(`Gamepad ${gamepadIndex} connected !`)
  }
 
  disconnectHandler(gamepadIndex) {
    console.log(`Gamepad ${gamepadIndex} disconnected !`)
  }
 
  buttonChangeHandler(buttonName, down) {
    console.log(buttonName, down)
  }
 
  axisChangeHandler(axisName, value, previousValue) {
    console.log(axisName, value)
  }
 
  buttonDownHandler(buttonName) {
    console.log(buttonName, 'down')
  }
 
  buttonUpHandler(buttonName) {
    console.log(buttonName, 'up')
  }
 
  render() {
    return (
      <div>
      <Gamepad
        onConnect={this.connectHandler}
        onDisconnect={this.disconnectHandler}
 
        onButtonChange={this.buttonChangeHandler}
        onAxisChange={this.axisChangeHandler}
      />
      </div>
    )
  }
}

export default App;

but am getting these error once npm start is done

error message:

Module../src/index.js
D:/Reactjs/newGR/my-app/src/index.js:7
   4 | import App from './App';
   5 | import * as serviceWorker from './serviceWorker';
   6 | 
>  7 | ReactDOM.render(<App />, document.getElementById('root'));
   8 | 
   9 | // If you want your app to work offline and load faster, you can change
  10 | // unregister() to register() below. Note this comes with some pitfalls.
View compiled
__webpack_require__
D:/Reactjs/newGR/my-app/webpack/bootstrap:782
  779 | };
  780 | 
  781 | // Execute the module function
> 782 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  783 | 
  784 | // Flag the module as loaded
  785 | module.l = true;
View compiled
fn
D:/Reactjs/newGR/my-app/webpack/bootstrap:150
  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
View compiled
0
http://localhost:3000/static/js/main.chunk.js:408:18
__webpack_require__
D:/Reactjs/newGR/my-app/webpack/bootstrap:782
  779 | };
  780 | 
  781 | // Execute the module function
> 782 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  783 | 
  784 | // Flag the module as loaded
  785 | module.l = true;
View compiled
checkDeferredModules
D:/Reactjs/newGR/my-app/webpack/bootstrap:45
  42 | 	}
  43 | 	if(fulfilled) {
  44 | 		deferredModules.splice(i--, 1);
> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 | 	}
  47 | }
  48 | return result;
View compiled
Array.webpackJsonpCallback [as push]
D:/Reactjs/newGR/my-app/webpack/bootstrap:32
  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 | 	// run deferred modules when all chunks ready
> 32 | 	return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 | 	var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:57

[gowdruNikhil]

its just worked for me by adding a child to it. and didn't understood why this happening.

<Gamepad
    onConnect={this.connectHandler}
    onDisconnect={this.disconnectHandler}
 
    onButtonChange={this.buttonChangeHandler}
    onAxisChange={this.axisChangeHandler}
>
  <p>hi</p>
</Gamepad>

[SBRK]

It's strange, I will check if it's possible to have no children instead of having just one

[edufschmidt]

Hi, I'm getting the same error. Any update on this?

A workaround is to force the component to render null at line 225 of the Gamepad.js script, which makes everything work nicely, except for the annoying error thrown at line 124 of this very same file.

Also getting this error, i have added a child element bu then get a constant stream of console.log errors

[SBRK]

@callumbooth can you provide some code ?

[rayriffy]

A better workaround for this problem is to pass <React.Fragment /> as children in component since it require at least one children. This method it will not create another DOM element in children docs

<Gamepad>
  <React.Fragment />
</Gamepad>

[ChristopheBraud]

Hello,
in your render method:
return React.Children.only(this.props.children)
I suppose you use Children.only because render must return something non null

A better solution is to return a fragment:

• always if you consider no children should be present in your componant
• only if props.children is empty

You can replace your return statement by:
return this.props.children ?? Fragment

I've tested it like this:

import {Component, Fragment} from 'react'

export default class Test extends Component {
  render() {
    return this.props.children ?? Fragment
  }
}

and in the app:

  render() {
    return (
      <>
        <Test/>
        <Test>hello</Test>
        <Test><p>hi!</p></Test>
        <Test><p>hello</p><p>salut</p></Test>
      </>
    )
  }

It works in every case.
Sorry I don't have time for a PR

[ChristopheBraud]

I finally created a PR :)
@SBRK, can you you merge it and publish it on npm ?