add function to remove epoch

src/PhonoChangeApplier.js

@@ -10,7 +10,7 @@ const PhonoChangeApplier = () => {
   const [ phonemes, setPhonemes ] = useState( 
       { phoneme: [ 'feature' ] } 
   );
-  const [ epochs, setEpochs ] = useState([{name: 'epoch one', changes:['sound>change/environment']}]);
+  const [ epochs, setEpochs ] = useState([{name: 'epoch 1', changes:['[+ feature]>[+ new feature]/[]_[]']}]);
 
   return (
     <div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">

src/components/Epochs.js

@@ -4,17 +4,22 @@ import './Epochs.scss';
 import SoundChangeSuite from './SoundChangeSuite';
 
 const addEpoch = (e, props) => {
-  console.log(props)
   e.preventDefault()
-  props.setEpochs([...props.epochs, {name: '', changes:['']}])
-  console.log(props)
+  let index = props.epochs.length + 1;
+  props.setEpochs([...props.epochs, {name: `epoch ${index}`, changes:['[+ feature]>[+ new feature]/[]_[]']}])
 }
 
+
 const Epochs = props => {
+  const removeEpoch = (e, epochName) => {
+    e.preventDefault()
+    let newEpochs = props.epochs.filter(epoch => epoch.name !== epochName);
+    props.setEpochs(newEpochs)
+  }
   return (
     <div className="Epochs" data-testid="Epochs">
       <h3>Sound Change Epochs</h3>
-      {props.epochs ? props.epochs.map((epoch, idx) => <SoundChangeSuite key={`epochname-${idx}`} epoch={epoch}/>) : <></>}
+      {props.epochs ? props.epochs.map((epoch, idx) => <SoundChangeSuite key={`epochname-${idx}`} epoch={epoch} removeEpoch={removeEpoch}/>) : <></>}
       <form onSubmit={e=>addEpoch(e, props)}>
         <input type="submit" name="add-epoch" value="Add Epoch" ></input>
       </form>

src/components/SoundChangeSuite.js

@@ -13,6 +13,9 @@ const SoundChangeSuite = props => {
           onChange={e=>setEpoch({...epoch, changes:e.target.value.split(/\n/)})}
         ></textarea>
       </form>
+      <form onSubmit={e=>props.removeEpoch(e, epoch.name)}>
+        <input type="submit" name="remove-epoch" value={`remove ${epoch.name}`}></input>
+      </form>
     </div>
   );
 }