Higher Order Component

.gitignore

@@ -1 +1,2 @@
 *node_modules*
+*.parcel-cache*

portfolio/src/components/App.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import Projects from './Projects';
 import SocialProfiles from './SocialProfiles';
 import Title from './Title';
-import Header from './Header';
 import profile from '../assets/profile.png';
 
 class App extends Component {
@@ -15,7 +14,6 @@ class App extends Component {
   render() {
     return (
       <div>
-        <Header />
         <img src={profile} alt='profile' className='profile' />
         <h1>Hello!</h1>
         <p>My name is David.</p>

portfolio/src/components/Header.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const Header = () => {
+const Header = ({ children }) => {
   const style = {
     display: 'inline-block',
     margin: 10,
@@ -10,8 +10,11 @@ const Header = () => {
 
   return (
     <div>
-      <h3 style={style}><Link to='/'>Home</Link></h3>
-      <h3 style={style}><Link to='/jokes'>Jokes</Link></h3>
+      <div>
+        <h3 style={style}><Link to='/'>Home</Link></h3>
+        <h3 style={style}><Link to='/jokes'>Jokes</Link></h3>
+      </div>
+      {children}
     </div>
   )
 }

portfolio/src/components/Jokes.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import Header from './Header';
 
 const Joke = ({ joke: { setup, punchline } }) => (
   <p style={{ margin: 20 }}>{setup} <em>{punchline}</em></p>
@@ -25,7 +24,6 @@ class Jokes extends Component {
   render() {
     return (
       <div>
-        <Header />
         <h2>Highlighted Joke</h2>
         <Joke joke={this.state.joke} />
         <hr />

portfolio/src/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
+import Header from './components/Header';
 import App from './components/App';
 import Jokes from './components/Jokes';
 import './index.css';
@@ -10,8 +11,8 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <BrowserRouter history={createBrowserHistory()}>
     <Routes>
-      <Route path='/' element={<App />} />
-      <Route path='/jokes' element={<Jokes />} />
+      <Route path='/' element={<Header><App /></Header>} />
+      <Route path='/jokes' element={<Header><Jokes /></Header>} />
     </Routes>
   </BrowserRouter>
 );