Adding States to Form Groups.

src/pages/Signup.js

@@ -16,10 +16,13 @@ export function Signup ( props ) {
     }
 
     useEffect( () => {
-        if(username.length > 4) {
+        if(username.length >= 4) {
-           console.log("longer than 4 characters")
+            setValidusername(true)
         }
-        }, [username] )
+        else {
+            setValidusername(false)
+        }
+     }, [username] )
 
     return (
        
@@ -38,11 +41,21 @@ export function Signup ( props ) {
                     </Form.Group>
                     <Form.Group>    
                     <Form.Label>Email</Form.Label>
-                    <Form.Control type="email" name="email" placeholder='you@example.com'/>
+                    <Form.Control
+                    type="email"
+                    name="email"
+                    placeholder="you@example.com"
+                    onChange={ (evt) => setUseremail(evt.target.value) }
+                    />
                     </Form.Group>
                     <Form.Group>
                     <Form.Label>Password</Form.Label>
-                    <Form.Control type="password" name="password" placeholder='password'/>
+                    <Form.Control
+                    type="password"
+                    name="password"
+                    placeholder='password'
+                    onChange={ (evt) => setUserpassword(evt.target.value) }
+                    />
                     </Form.Group>
                     <Button variant="primary" className="mt-3 w-100" type="submit">Sign up</Button>
                 </Form>