edit rules in epoch hook for one sound change suite

src/PhonoChangeApplier.js

@@ -10,12 +10,13 @@ const PhonoChangeApplier = () => {
   const [ phonemes, setPhonemes ] = useState( 
       { phoneme: [ 'feature' ] } 
   );
+  const [ epochs, setEpochs ] = useState([{name: 'epoch one', changes:['sound>change/environment']}]);
 
   return (
     <div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
       <ProtoLang lexicon={lexicon} setLexicon={setLexicon}/>
       <Features phonemes={phonemes} setPhonemes={setPhonemes}/>
-      <Epochs />
+      <Epochs epochs={epochs} setEpochs={setEpochs}/>
     </div>
   );
 }

src/components/Epochs.js

@@ -7,7 +7,7 @@ const Epochs = props => {
   return (
     <div className="Epochs" data-testid="Epochs">
       <h3>Sound Change Epochs</h3>
-      <SoundChangeSuite />
+      {props.epochs ? props.epochs.map(epoch => <SoundChangeSuite key={epoch.name} epoch={epoch}/>) : <></>}
     </div>
   );
 }

src/components/SoundChangeSuite.js

@@ -1,13 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './SoundChangeSuite.scss';
 
 const SoundChangeSuite = props => {
-  let epochName = props.epoch ? Object.keys(props.epoch)[0] : 'Changes';
+  const [ epoch, setEpoch ] = useState(props.epoch ? props.epoch : {name:'', changes:['']})
   return (
-    <div className="SoundChangeSuite" data-testid={`${epochName}_SoundChangeSuite`}>
-      <h4>{epochName}</h4>
-      <form className="SoundChangeSuite__form" data-testid={`${epochName}_SoundChangeSuite_changes`}>
-        <textarea name="changes" id="" cols="30" rows="10" value={props.epoch ? props.epoch[epochName][0] : ''} onChange={e=>e.target.value}></textarea>
+    <div className="SoundChangeSuite" data-testid={`${epoch.name}_SoundChangeSuite`}>
+      <h4>{epoch.name}</h4>
+      <form className="SoundChangeSuite__form" data-testid={`${epoch.name}_SoundChangeSuite_changes`}>
+        <textarea name="epoch" id="" cols="30" rows="1" value={epoch.name} onChange={e=>setEpoch({...epoch, name:e.target.value})} ></textarea>
+        <textarea name="changes" id="" cols="30" rows="10" 
+          value={epoch.changes.join('\n')} 
+          onChange={e=>setEpoch({...epoch, changes:e.target.value.split(/\n/)})}
+        ></textarea>
       </form>
     </div>
   );

src/components/SoundChangeSuite.test.js

@@ -14,12 +14,12 @@ it('renders SoundChangeSuite without crashing', () => {
 
 describe('SoundChangeSuite', () => {
   it('renders the correct subtitle', () => {
-    const { getByTestId } = render(<SoundChangeSuite epoch={{'Epoch Name': ['sound change rule']}}/>);
+    const { getByTestId } = render(<SoundChangeSuite epoch={{name:'Epoch Name', changes:['sound change rule']}}/>);
     expect(getByTestId('Epoch Name_SoundChangeSuite')).toHaveTextContent('Epoch Name');
   });
 
   it('renders a suite of soundchanges', () => {
-    const { getByTestId } = render(<SoundChangeSuite epoch={{'Epoch Name': ['sound>change/environment']}}/>);
+    const { getByTestId } = render(<SoundChangeSuite epoch={{name:'Epoch Name', changes:['sound>change/environment']}}/>);
     expect(getByTestId('Epoch Name_SoundChangeSuite_changes')).toHaveFormValues({changes: 'sound>change/environment'})
   })
 });