CODEWITHSUNDEEP
javascriptreactjswebpackjsxreact-dom
Ruben
Ruben

Reputation: 515

React child components do not render

Im new to react and am currently trying to render some components. My problem is that only the parent Component is being rendered. I also have child Components but react doesnt seem to recognize them?

This is my index where I am importing my App component.

import ReactDom from 'react-dom';
import React from 'react';
import App from './app';

function BuildApp() {
  return (
    <App />
  );
}

ReactDom.render(<BuildApp />, document.body);

Here is my App component.

import React from 'react';
import Container from './components/bootstrap-components/Container';
import TopInfo from './components/TopInfo/TopInfo';

export default function App() {
  return (
      <Container>
        <TopInfo />
      </Container>
  );
}

The only thing my App Component renders is Container Component not the TopInfo. If I remove the Container component and only have TopInfo, React will render TopInfo.

Upvotes: 0

Views: 470

Answers (1)

wangdev87
wangdev87

Reputation: 8751

Refer to React children.

function Container(props) {
   return (
     <div>
       {props.chilidren}
     </div>
   );
}

Upvotes: 1

Related Questions