output error message for sound change suite

src/PhonoChangeApplier.js

@@ -15,11 +15,12 @@ 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 [ errors, setErrors ] = useState({})
   
   const runChanges = e => {
     e.preventDefault();
-    // validate rules
-    let error = epochs.reduce((errorObject, epoch) => {
+
+    let ruleError = epochs.reduce((errorObject, epoch) => {
       epoch.changes.map((change, index) => {
         if (!change.match(/>.*\/.*_/)) errorObject[epoch.name] 
           ? errorObject[epoch.name].push(index) 
@@ -27,16 +28,18 @@ const PhonoChangeApplier = () => {
       })
       return errorObject;
     }, {})
-    console.log(error)
-    // validate lexicon
     
+    if (Object.entries(ruleError).length) return setErrors(ruleError)
+    setErrors({});
+    
+    // setResults
   }
 
   return (
     <div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
       <ProtoLang lexicon={lexicon} setLexicon={setLexicon}/>
       <Features phonemes={phonemes} setPhonemes={setPhonemes}/>
-      <Epochs epochs={epochs} setEpochs={setEpochs}/>
+      <Epochs epochs={epochs} setEpochs={setEpochs} errors={errors}/>
       <Options options={options} setOptions={setOptions} runChanges={runChanges}/>
       <Output results={results} setResults={setResults}/>
     </div>

src/components/Epochs.js

@@ -28,7 +28,14 @@ const Epochs = props => {
   return (
     <div className="Epochs" data-testid="Epochs">
       <h3>Sound Change Epochs</h3>
-      {props.epochs ? props.epochs.map((epoch, idx) => <SoundChangeSuite key={`epochname-${idx}`} epochIndex={idx} epoch={epoch} updateEpoch={updateEpoch} removeEpoch={removeEpoch}/>) : <></>}
+      {props.epochs 
+        ? props.epochs.map((epoch, idx) => {
+        return <SoundChangeSuite 
+          key={`epochname-${idx}`} epochIndex={idx} epoch={epoch} 
+          updateEpoch={updateEpoch} removeEpoch={removeEpoch}
+          error={props.errors[epoch.name]}
+        />}) 
+        : <></>}
       <form onSubmit={e=>addEpoch(e, props)}>
         <input type="submit" name="add-epoch" value="Add Epoch" ></input>
       </form>

src/components/SoundChangeSuite.js

@@ -23,6 +23,9 @@ const SoundChangeSuite = props => {
           )} 
         ></textarea>
         
+        {props.error 
+          ? <p><span className="error-message">{`Formatting errors in line(s) ${props.error.join(', ')}`}</span></p>
+          : <></>}
         <textarea 
           name="changes" 
           id="" cols="30" rows="10"