Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x | import { FormEventHandler, useState } from "react";
import React from "react";
import { NewContactFormProps } from "../../../utils/types";
import Button from "../../Button/Button";
import Input from "../../Input/Input";
import "./NewContactForm.css";
const NewContactForm = ({ onAddContact, textButton }: NewContactFormProps) => {
const [enteredName, setEnteredName] = useState("");
const [enteredAge, setEnteredAge] = useState("");
const [enteredEmail, setEnteredEmail] = useState("");
const [enteredPhone, setEnteredPhone] = useState("");
const nameChangeHandler = (
event: React.ChangeEvent<HTMLInputElement>,
): void => {
setEnteredName(event.currentTarget.value);
};
const ageChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
setEnteredAge(event.currentTarget.value);
};
const emailChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
setEnteredEmail(event.currentTarget.value)
}
const phoneChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
setEnteredPhone(event.currentTarget.value)
}
const submitContactHandler: FormEventHandler<HTMLFormElement> = (event) => {
event.preventDefault();
onAddContact(enteredName, enteredAge, enteredEmail, enteredPhone);
};
return (
<section className="new-contact">
<h2>Add a New Contact</h2>
<form onSubmit={submitContactHandler}>
<Input
type="text"
label="Name"
id="name"
value={enteredName}
onChange={nameChangeHandler}
placeholder="Camille"
/>
<Input
type="number"
label="Age"
id="age"
value={enteredAge}
onChange={ageChangeHandler}
placeholder="19"
/>
<Input
type="text"
label="Email"
id="email"
value={enteredEmail}
onChange={emailChangeHandler}
placeholder="camilledegrasse@zmail.com"
/>
<Input
type="text"
label="Phone"
id="phone"
value={enteredPhone}
onChange={phoneChangeHandler}
placeholder="+31094887472999"
/>
<Button type="submit" textButton={textButton}></Button>
</form>
</section>
);
};
export default NewContactForm;
|