Add exercise 06 solution

src/__tests__/06.extra-3.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import App from '../final/06.extra-3'
-// import App from '../exercise/06'
+// import App from '../final/06.extra-3'
+import App from '../exercise/06'
 
 beforeAll(() => {
   jest.spyOn(global, 'alert').mockImplementation(() => {})

src/exercise/06.js

@@ -1,29 +1,29 @@
 // Basic Forms
 // http://localhost:3000/isolated/exercise/06.js
 
+import { useRef } from "react";
 import React from 'react'
 
 function UsernameForm({onSubmitUsername}) {
-  // 🐨 add a submit event handler here (`handleSubmit`).
-  // 💰 Make sure to accept the `event` as an argument and call
-  // `event.preventDefault()` to prevent the default behavior of form submit
-  // events (which refreshes the page).
-  //
-  // 🐨 get the value from the username input (using whichever method
-  // you prefer from the options mentioned in the instructions)
-  // 💰 For example: event.target.elements[0].value
-  // 🐨 Call `onSubmitUsername` with the value of the input
-
-  // 🐨 add the onSubmit handler to the <form> below
-
-  // 🐨 replace input's name attribute with id attribute
-  // 🐨 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 inputRef = useRef(null);
+  const [username, setUsername] = React.useState('');
+
+  const handleChange = (e) => {
+    setUsername(e.target.value.toLowerCase());
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const username = inputRef.current.value;
+    onSubmitUsername(username);
+  }
+
   return (
-    <form>
+    <form onSubmit={handleSubmit}>
       <div>
-        <label>Username:</label>
-        <input name="username" type="text" />
+        <label htmlFor="username">Username:</label>
+        <input id="username" type="text" ref={inputRef} onChange={handleChange} value={username}/>
       </div>
       <button type="submit">Submit</button>
     </form>
@@ -35,4 +35,4 @@ function App() {
   return <UsernameForm onSubmitUsername={onSubmitUsername} />
 }
 
-export default App
+export default App