render list of results from results hook

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>
   );
 }

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>
   );
 }

src/components/Output.test.js

@@ -20,8 +20,8 @@ describe('Output', () => {
   });
   
   it('renders output lexicon list from output hook', () => {
-    const { getByTestId } = render(<Output />);
+    const { getByTestId } = render(<Output results={['word', 'lex', 'word']}/>);
-    // expect(getByTestId('Output-list'));
+    expect(getByTestId('Output-lexicon')).toContainHTML('<p>word</p><p>lex</p><p>word</p>');
   });
 
 });