refactor Output component to display multiple results

src/PhonoChangeApplier.js

@@ -102,7 +102,7 @@ const PhonoChangeApplier = () => {
       <Features phones={phones} features={features} dispatch={dispatch}/>
       <Epochs epochs={epochs} dispatch={dispatch} />
       <Options options={options} dispatch={dispatch}/>
-      <Output results={results} dispatch={dispatch}/>
+      <Output results={results} options={options} dispatch={dispatch}/>
     </div>
   );
 }

src/components/Output.js

@@ -2,13 +2,33 @@ import React from 'react';
 import './Output.scss';
 
 const Output = props => {
-  const { results } = props;
+  const { results, options } = props;
+  const renderResults = () => {
+    switch(options.output) {
+      case 'default':
+        return renderDefault();
+      default:
+        return <></>
+    }
+  }
+
+  const renderDefault = () => {
+    return results.map((epoch, i) => {
+    const lexicon = epoch.lexicon.map(lexeme => <span>{lexeme}</span>);
+      return (
+      <div key={`epoch-${i}`} className="Output-epoch">
+        <h5>{epoch.pass}</h5>
+        <p className="lexicon">{lexicon}</p>
+      </div>
+      )
+    })
+  }
   return (
     <div className="Output" data-testid="Output">
       <h3>Results of Run</h3>
 
-      <div data-testid="Output-lexicon">
+      <div data-testid="Output-lexicon" className="Output_container">
-        {results && results.length ? results[0].lexicon.map((lexicalItem, i) => <p key={`output-lexical-item-${i}`}>{lexicalItem}</p>) : <></>}
+        {results && results.length ? renderResults() : <></>}
       </div>
     </div>
   );

src/components/Output.scss

@@ -0,0 +1,6 @@
+div.Output-epoch {
+  display: flex;
+  p.lexicon {
+    display: flex;
+  }
+}