From 20601af7464ca481874c4b7cacb990b5aa45697d Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel.bri.june@gmail.com>
Date: Sat, 30 Nov 2019 00:00:09 -0800
Subject: [PATCH] render list of results from results hook

---
 src/PhonoChangeApplier.js     | 3 ++-
 src/components/Output.js      | 4 ++++
 src/components/Output.test.js | 4 ++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/PhonoChangeApplier.js b/src/PhonoChangeApplier.js
index 3e5770f..22036a6 100644
--- a/src/PhonoChangeApplier.js
+++ b/src/PhonoChangeApplier.js
@@ -14,6 +14,7 @@ const PhonoChangeApplier = () => {
   );
   const [ epochs, setEpochs ] = useState([{name: 'epoch 1', changes:['[+ feature]>[- feature]/_#']}]);
   const [ options, setOptions ] = useState({output: 'default', save: false})
+  const [ results, setResults ] = useState([])
   
   const runChanges = e => {
     e.preventDefault();
@@ -26,7 +27,7 @@ const PhonoChangeApplier = () => {
       <Features phonemes={phonemes} setPhonemes={setPhonemes}/>
       <Epochs epochs={epochs} setEpochs={setEpochs}/>
       <Options options={options} setOptions={setOptions} runChanges={runChanges}/>
-      <Output />
+      <Output results={results} setResults={setResults}/>
     </div>
   );
 }
diff --git a/src/components/Output.js b/src/components/Output.js
index 68fb568..9c9e5e9 100644
--- a/src/components/Output.js
+++ b/src/components/Output.js
@@ -5,6 +5,10 @@ const Output = props => {
   return (
     <div className="Output" data-testid="Output">
       <h3>Results of Run</h3>
+
+      <div data-testid="Output-lexicon">
+        {props.results ? props.results.map((lexicalItem, i) => <p key={`output-lexical-item-${i}`}>{lexicalItem}</p>) : <></>}
+      </div>
     </div>
   );
 }
diff --git a/src/components/Output.test.js b/src/components/Output.test.js
index 9a4f4c7..a5de8c7 100644
--- a/src/components/Output.test.js
+++ b/src/components/Output.test.js
@@ -20,8 +20,8 @@ describe('Output', () => {
   });
   
   it('renders output lexicon list from output hook', () => {
-    const { getByTestId } = render(<Output />);
-    // expect(getByTestId('Output-list'));
+    const { getByTestId } = render(<Output results={['word', 'lex', 'word']}/>);
+    expect(getByTestId('Output-lexicon')).toContainHTML('<p>word</p><p>lex</p><p>word</p>');
   });
 
 });
\ No newline at end of file