Why are my React nested components not showing up?

Question

I have a problem with my React component. The nested children of my component ControlPaneldo not seem to be rendering. Here is my code:

class App extends Component {
  render() {
    return (
      <div className="App">
        <ControlPanel>
          <CustomerDisplay />
        </ControlPanel>
      </div>
    );
  }
}

I have the following two lines at the top of this file:

import ControlPanel from './components/control_panel';

import CustomerDisplay from './components/customer_display';

And here is my ControlPanelComponent:

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './styles.scss';

const ControlPanel = () => {
    return (
      <div className="control_panel" id="control_panel">

      </div>
    );
}

export default CSSModules(ControlPanel, styles);

I tried:

• Calling a component as a full HTML tag (opening and closing)
• Embedding a component CustomerDisplayin a component ControlPanel(in ControlPanelindex.jsx file )

I know that a nesting component is possible. I have seen that. For some reason this just won't work for me.

Answer 1

, this.props.children. , :

. , Sidebar Dialog, "".

, children prop :

function FancyBorder(props) {
    return (
      <div className={'FancyBorder FancyBorder-' + props.color}>
        {props.children}
      </div>
    );
}

, JSX

function WelcomeDialog() {
    return (
      <FancyBorder color="blue">
        <h1 className="Dialog-title">
          Welcome
        </h1>
        <p className="Dialog-message">
          Thank you for visiting our spacecraft!
        </p>
      </FancyBorder>
    );
}

, - , , ControlPanel. , , children prop render. , :

const ControlPanel = (props) => {
    return (
      <div className="control_panel" id="control_panel">
        {props.children}
      </div>
    );
}

, props.children ( this.props.children, ).

Answer 2

. :

const ControlPanel = (props) => {
  return (
    <div className="control_panel" id="control_panel">
      {props.children}
    </div>
  );
}

Answer 3

ControlPanel

const ControlPanel = ({ children }) => {
    return (
      <div className="control_panel" id="control_panel">
        {children}
      </div>
    );
}

Answer 4

App.js( , JSX) :

import React from 'react';
import ReactDOM from 'react-dom';

export default class App extends Component {
render() {
return (
  <div className="App">
    <ControlPanel>
      <CustomerDisplay />
    </ControlPanel>
  </div>
);
}
}


ReactDOM.render(<App/>, document.getElementById('YOUR_ROOT_ID'));

export default class ( ).