registration name

src/components/Registration.css

@@ -6,4 +6,11 @@
     width: 80vw;
     height: 50px;
     background-color: rgb(187, 218, 174);
+}
+
+.user-creation {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
 }

src/components/Registration.js

@@ -8,6 +8,7 @@ function Registration() {
     const [userId, setUserId] = useState("2808202300103ROOBHO");
     const [counter, setCounter] = useState(0);
     const [message, setMessage] = useState("");
+    const [name, setName] = useState("");
 
     const createUser = () => {
         setMessage("");
@@ -29,7 +30,7 @@ function Registration() {
                 "gender": "Male",
                 "house": "42",
                 "maritalStatus": "Single",
-                "name": "Web",
+                "name": name ? name : "Web",
                 "phoneNumber": "9123456789",
                 "pinCode": "560060",
                 "registeredBy": "admin",
@@ -55,8 +56,16 @@ function Registration() {
             });
     }
 
+    const onNameChange = (event) => {
+        setName(event.target.value);
+    }
+
     return (
-        <div>
+        <div className="user-creation">
+            <label>
+                name:
+                <input name="name" value={name} placeholder="350umol kmon04" onChange={onNameChange} />
+            </label>
             <div className='dates'>
                 <div className='button' onClick={() => createUser()}>Create User</div>
             </div>