Реакция компонентов внутри фрагмента не загружается

Question

Я использую реакции 16.2.0 и 16.2.0.Ниже приведен код, который у меня есть.

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;

Моя проблема в том, что компоненты, которые я возвращаю внутри, не отображаются.Я также не получаю никаких ошибок в консоли.

Я пытался отобразить простой HTML-код, такой как

<Fragment>
    <p>foo</p>
    <p>bar</p>
</Fragment>

Но проблема остается.Может кто-нибудь, пожалуйста, помогите мне с этим.