From 0bfcd281d96593c14fdb8dcec9c25c4033df207f Mon Sep 17 00:00:00 2001
From: SandraBergstrom <bergstrom_sandra@hotmail.com>
Date: Wed, 21 Jun 2023 07:26:48 +0000
Subject: [PATCH] #10 Add handleChange  and values to form

---
 src/pages/auth/SignUpForm.js | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/pages/auth/SignUpForm.js b/src/pages/auth/SignUpForm.js
index 5cbc808..ef45b11 100644
--- a/src/pages/auth/SignUpForm.js
+++ b/src/pages/auth/SignUpForm.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 
 import styles from "../../styles/SignInUpForm.module.css";
@@ -6,8 +6,23 @@ import btnStyles from "../../styles/Button.module.css";
 import appStyles from "../../App.module.css";
 
 import { Form, Button, Image, Col, Row, Container } from "react-bootstrap";
+import { useHistory } from "react-router-dom";
 
 const SignUpForm = () => {
+  const [signUpData, setSignUpData] = useState({
+    username: "",
+    password1: "",
+    password2: "",
+  });
+  const { username, password1, password2 } = signUpData;
+
+  const handleChange = (event) => {
+    setSignUpData({
+      ...signUpData,
+      [event.target.name]: event.target.value,
+    });
+  };
+
   return (
     <Row className={styles.Row}>
       <Col
@@ -32,6 +47,8 @@ const SignUpForm = () => {
                 type="text"
                 placeholder="Username"
                 name="username"
+                value={username}
+                onChange={handleChange}
               />
             </Form.Group>
 
@@ -42,6 +59,8 @@ const SignUpForm = () => {
                 type="password"
                 placeholder="Password"
                 name="password1"
+                value={password1}
+                onChange={handleChange}
               />
             </Form.Group>
 
@@ -52,13 +71,13 @@ const SignUpForm = () => {
                 type="password"
                 placeholder="Confirm password"
                 name="password2"
+                value={password2}
+                onChange={handleChange}
               />
             </Form.Group>
 
             <Button
-              className={
-                `${btnStyles.Button} ${btnStyles.Wide} ${btnStyles.Bright}`
-              }
+              className={`${btnStyles.Button} ${btnStyles.Wide} ${btnStyles.Bright}`}
               type="submit"
             >
               Sign up!