render epoch name

src/PhonoChangeApplier.js

@@ -3,6 +3,7 @@ import './PhonoChangeApplier.scss';
 
 import ProtoLang from './components/ProtoLang';
 import Features from './components/Features';
+import Epochs from './components/Epochs';
 
 const PhonoChangeApplier = () => {
   const [ lexicon, setLexicon ] = useState(['one']);
@@ -14,6 +15,7 @@ const PhonoChangeApplier = () => {
     <div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
       <ProtoLang lexicon={lexicon} setLexicon={setLexicon}/>
       <Features phonemes={phonemes} setPhonemes={setPhonemes}/>
+      <Epochs />
     </div>
   );
 }

src/components/Epochs.js

@@ -3,7 +3,7 @@ import './Epochs.scss';
 
 import SoundChangeSuite from './SoundChangeSuite';
 
-const Epochs = () => {
+const Epochs = props => {
   return (
     <div className="Epochs" data-testid="Epochs">
       <h3>Sound Change Epochs</h3>

src/components/SoundChangeSuite.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import './SoundChangeSuite.scss';
 
-const SoundChangeSuite = () => {
+const SoundChangeSuite = props => {
   return (
     <div className="SoundChangeSuite" data-testid="SoundChangeSuite">
-      <h4>Epoch Name</h4>
+      <h4>{props.epoch ? Object.keys(props.epoch)[0] : 'Changes'}</h4>
     </div>
   );
 }

src/components/SoundChangeSuite.test.js

@@ -14,7 +14,7 @@ it('renders SoundChangeSuite without crashing', () => {
 
 describe('SoundChangeSuite', () => {
   it('renders the correct subtitle', () => {
-    const { getByTestId } = render(<SoundChangeSuite />);
+    const { getByTestId } = render(<SoundChangeSuite epoch={{'Epoch Name': ['sound change rule']}}/>);
     expect(getByTestId('SoundChangeSuite')).toHaveTextContent('Epoch Name');
   });