Fixed stuff missing from PageHeader component from previous commit

src/components/OurFirstComponentWithAllRelatedFiles/Headings.jsx

-import React from 'react';
-
-// the hook
-import { useTranslation } from 'react-i18next';
-
-export const Headings = () => {
-    const { t, i18n } = useTranslation();
-    return([
-        <h1>{t('EntangledAfrica1')}</h1>,
-        <h2>{t('EntangledAfrica2')}</h2>
-    ])
-};
\ No newline at end of file

src/components/PageHeader/PageHeader.jsx

@@ -3,6 +3,11 @@ import { useTranslation } from 'react-i18next';
 
 export const PageHeader = () => {
     const { t, i18n } = useTranslation();
+
+    const changeLanguage = lng => {
+        i18n.changeLanguage(lng);
+    };
+
     return(
         <header>
             <div>

src/components/index.js

@@ -2,4 +2,4 @@
 //by doing this all components can be imported from './components/';
 //named exports are used instead of default export; thus imports need to be destructured
 export { HelloComputerButton } from './HelloComputerButton/HelloComputerButton';
-export { Headings } from './OurFirstComponentWithAllRelatedFiles/Headings';
\ No newline at end of file
+export { PageHeader } from './PageHeader/PageHeader';
\ No newline at end of file

src/index.js

 import React, { useState, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import { HelloComputerButton } from './components/';
-import { Headings } from './components/';
+import { PageHeader } from './components/';
 import { LabelsContext, SettingsContext } from './Contexts';
 import { INIT_LABELS, INIT_SETTINGS } from "./INIT_VALUES";
 import './index.css';
@@ -12,10 +12,6 @@ const App = () => {
 
     const { t, i18n } = useTranslation();
 
-    const changeLanguage = lng => {
-        i18n.changeLanguage(lng);
-    };
-
     const [labels, setLabels] = useState(INIT_LABELS);
     const [settings, setSettings] = useState(INIT_SETTINGS);
 
@@ -36,11 +32,7 @@ const App = () => {
 
     return(
         <LabelsContext.Provider value={labels} ><SettingsContext.Provider value={settings}>
-            <button onClick={() => changeLanguage('de')}>Deutsch</button>
-            <button onClick={() => changeLanguage('en')}>English</button>
-            <button onClick={() => changeLanguage('fr')}>Français</button>
-            <button onClick={() => changeLanguage('ar')}>لعربية</button>
-            <Headings />
+            <PageHeader />
             <div>
                 <span>{labels.HelloWorld[settings.language]}</span><br />
                 <HelloComputerButton />