-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathUserInput.js
More file actions
57 lines (49 loc) · 1.41 KB
/
Copy pathUserInput.js
File metadata and controls
57 lines (49 loc) · 1.41 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React, { useState } from "react";
import styles from "./UserInput.module.css";
import Button from "../UI/Button";
const UserInput = (props) => {
const [enteredUsername, setEnteredUsername] = useState("");
const [enteredAge, setEnteredAge] = useState("");
const usernameChangeHandler = (event) => {
setEnteredUsername(event.target.value);
};
const ageChangeHandler = (event) => {
setEnteredAge(event.target.value);
};
const submitHandler = (event) => {
event.preventDefault();
const userData = {
id: Math.random().toString(),
username: enteredUsername,
age: +enteredAge,
};
props.onAddUserInput(userData);
setEnteredUsername("");
setEnteredAge("");
};
return (
<div className={styles["form-control"]}>
<h2 className={styles.h2}>Add a new user</h2>
<form method={props.method} onSubmit={submitHandler}>
<div>
<label htmlFor="username">Username</label>
<input
type="text"
value={enteredUsername}
onChange={usernameChangeHandler}
></input>
</div>
<div>
<label htmlFor="age">Age (years)</label>
<input
type="number"
value={enteredAge}
onChange={ageChangeHandler}
></input>
</div>
<Button type="submit" label="Add User" />
</form>
</div>
);
};
export default UserInput;