How to make Aux work in react (Higher order component)

Question

Hello everyone i am having a problem with rendering the Aux element in react. I Want to render the children elements passed into Aux, but not under the same div.

React.fragment works passing it as an array also works but when i pass it as Aux i get an error.

The Code

App.js

import React, {Component} from 'react';

import Layout from './components/Layout/Layout';

class App extends Component {
  render() {
    return (
      <div key="app1">
        <Layout>
            <p>Hello world</p>
        </Layout>
      </div>
    );
  }
}

export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

Layout.js

Aux.js

import React from 'react';
import Aux from '../../hco/Aux';
const layout = ( props ) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main>
            {props.children}
        </main>
    </Aux>
);
export default layout;**

The errors in google chrome console:

**

First chrome error:

Uncaught Error: aux(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
    at reconcileChildFibers (react-dom.development.js:15675)
    at reconcileChildren (react-dom.development.js:18093)
    at mountIndeterminateComponent (react-dom.development.js:18833)
    at beginWork$1 (react-dom.development.js:20121)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:439)
    at beginWork$$1 (react-dom.development.js:25723)
    at performUnitOfWork (react-dom.development.js:24646)
    at workLoopSync (react-dom.development.js:24622)
    at performSyncWorkOnRoot (react-dom.development.js:24211)
    at scheduleUpdateOnFiber (react-dom.development.js:23638)
    at updateContainer (react-dom.development.js:27047)
    at react-dom.development.js:27464
    at unbatchedUpdates (react-dom.development.js:24376)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:27463)
    at Object.render (react-dom.development.js:27548)
    at Module../src/index.js (index.js:7)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object.0 (serviceWorker.js:135)
    at __webpack_require__ (bootstrap:785)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Second chrome error:

index.js:1375 The above error occurred in the <aux> component:
in aux (at Layout.js:8)
in layout (at App.js:9)
in div (at App.js:8)
in App (at src/index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit /react-error-boundaries to learn more about error boundaries.

Third chrome error:

Uncaught Error: aux(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
at reconcileChildFibers (react-dom.development.js:15675)
at reconcileChildren (react-dom.development.js:18093)
at mountIndeterminateComponent (react-dom.development.js:18833)
at beginWork$1 (react-dom.development.js:20121)
at HTMLUnknownElement.callCallback (react-dom.development.js:337)
at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
at invokeGuardedCallback (react-dom.development.js:439)
at beginWork$$1 (react-dom.development.js:25723)
at performUnitOfWork (react-dom.development.js:24646)
at workLoopSync (react-dom.development.js:24622)
at performSyncWorkOnRoot (react-dom.development.js:24211)
at scheduleUpdateOnFiber (react-dom.development.js:23638)
at updateContainer (react-dom.development.js:27047)
at react-dom.development.js:27464
at unbatchedUpdates (react-dom.development.js:24376)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:27463)
at Object.render (react-dom.development.js:27548)
at Module../src/index.js (index.js:7)
at __webpack_require__ (bootstrap:785)
at fn (bootstrap:150)
at Object.0 (serviceWorker.js:135)
at __webpack_require__ (bootstrap:785)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1

Answer 1

I recommend using React fragments, they do the same thing: https://reactjs.org/docs/fragments.html