React Components inside fragment not loading - reactjs

Question

I'm using react 16.2.0 and react-dom 16.2.0. Following is the code I have.
import React, { Fragment } from 'react';
import BodyComponent from './BodyComponent';
import * as HeaderComponents from './HeaderComponent';
class TablePage extends React.Component {
constructor(props) {
super(props);
}
render() {
const MyHeader = (props) => {
const Header = HeaderComponents.TableHeader;
return <Header status={props.status}/>;
};
let pageContent = null;
pageContent = (
<ul className="list-table" role="table" aria-label={MessageConstants.ASSIGNMENT_ITEMS_TABLE_CAPTION_MESSAGE}>
<MyHeader status={status}/>
{
items.map((item, i) => {
return <TableBody dataSet={item} key={i}/>;
})
}
</ul>
);
return (pageContent);
}
}
class TableBody extends React.Component {
constructor(props) {
super(props);
}
render() {
const {dataSet} = this.props;
const BodyHeader = (props) => {
const Header = HeaderComponents.BodyHeader;
return <Header index={this.props.index}/>;
};
return (
<Fragment>
<BodyHeader index={this.props.index}/>
<BodyComponent itemList={dataSet.content}/>
</Fragment>
);
}
}
export default TablePage;
My problem is, the components I'm returning inside are not rendering. I don't get any errors in the console as well.
I tried rendering simple html code such as
<Fragment>
<p>foo</p>
<p>bar</p>
</Fragment>
But the issue remains. Can someone please help me with this.