Exercise 6

src/exercise/06.js

@@ -18,11 +18,23 @@ function UsernameForm({onSubmitUsername}) {
 
   // 🐨 make sure to associate the label to the input.
   // to do so, set the value of 'htmlFor' prop of the label to the id of input
+  const [username, setUsername] = React.useState(null);
+
+  const handleSubmit = (event) => {
+    onSubmitUsername(username);
+
+    event.preventDefault();
+  };
+  const handleChange = (event) => {
+    const value = event.target.value.toLowerCase();
+    setUsername(value);
+  };
+
   return (
-    <form>
+    <form onSubmit={handleSubmit}>
       <div>
-        <label>Username:</label>
-        <input type="text" />
+        <label htmlFor="username">Username:</label>
+        <input type="text" id="username" onChange={handleChange} value={username} />
       </div>
       <button type="submit">Submit</button>
     </form>