App.js

import React, {createContext} from 'react';
import Header from '../pageElements/Header/Header';
import ServiceButtons from '../pageElements/ServiceButtons/ServiceButtons';
import Tabs from '../pageElements/Tabs/Tabs';

export const DataRootContext = createContext(null);
export const DataTabsContext = createContext(null);

export default function App({dataRoot, dataTabs}) {
    if (!dataRoot) {
        return <div>Loading...</div>;
    }

    if (dataRoot.isNetworkAdminDashboard) {
        return <div className="wrap">
            <div dangerouslySetInnerHTML={{__html: dataRoot.networkAdminDashboardMsg}}></div>
        </div>;
    }

    if (!dataTabs) {
        return <div>Loading...</div>;
    }

    return (
        <DataRootContext.Provider value={dataRoot}>
            <DataTabsContext.Provider value={dataTabs}>
                <Header data={dataRoot} />
                <ServiceButtons />
                <Tabs data={dataTabs} />
            </DataTabsContext.Provider>
        </DataRootContext.Provider>
    );
}