fix bug

src/ChordForm.tsx

@@ -1,4 +1,10 @@
-import React, { useState, ReactElement, FormEvent, ChangeEvent } from 'react';
+import React, {
+  useState,
+  useEffect,
+  ReactElement,
+  FormEvent,
+  ChangeEvent,
+} from 'react';
 import { chord2fingering, chords, notes, accidentals } from './chords';
 
 const availableChords = Object.keys(chords);
@@ -13,6 +19,15 @@ const ChordForm = ({
   const [chord, setChord] = useState('');
   const [error, setError] = useState('');
 
+  useEffect(() => {
+    try {
+      chord2fingering(chord);
+      setError('');
+    } catch (e) {
+      setError(e.message);
+    }
+  }, [chord]);
+
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
     setChord('');
@@ -21,14 +36,7 @@ const ChordForm = ({
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
-
     setChord(value);
-    try {
-      chord2fingering(value);
-      setError('');
-    } catch (e) {
-      setError(e.message);
-    }
   };
 
   return (