无法渲染我的组件，需要赋值或 function 调用，而是在 React 中看到了一个表达式

Question

I written my code following a udemy course. I'm unable to render the Layout component's content is there anything I missed or any syntax mistakes that needs to be corrected to sort this out?

const Aux = (props) => {props.children}

export default Aux;

import React,{Component} from 'react'
import Layout from './components/Layout/Layout';

class App extends Component
 {
  render() {
    return (
      <div>
        <Layout>
          <p>Hai.. Is this working ? </p>
        </Layout>
      </div>
    );
  }
}

export default App;

import React from 'react';
import Aux from '../../hoc/Auxx';

const layout = (props) =>(
    <Aux>
    <div>Toolbar,Sidebar,Backdrop</div>
    <main>
        {props.children}
    </main>
    </Aux>
    
);

export default layout;

Answer 1

You problem is that Aux is a blank component.

When you use the syntax const Aux = (props) => {props.children} you actually return nothing!

You see, javascript thinks that { } is the function itself and not return your props.children . Just remove the brackets:

const Aux = (props) => props.children;

Answer 2

I've modified your code as below:

const Aux = (props) => props.children // removed the {} so that it can return the children 

export default Aux;

import React,{Component} from 'react'
import Layout from './components/Layout/Layout';

class App extends Component
 {
  render() {
    return (
      <div>
        <Layout>
          <p>Hai.. Is this working ? </p>
        </Layout>
      </div>
    );
  }
}

export default App;

import React from 'react';
import Aux from '../../hoc/Auxx';

const Layout = (props) =>( //changed the layout to Layout: it needs to be capitalized
    <Aux>
    <div>Toolbar,Sidebar,Backdrop</div>
    <main>
        {props.children}
    </main>
    </Aux>
    
);

export default layout;