All files / Contacts/NewContactForm NewContactForm.tsx

87.5% Statements 70/80
100% Branches 2/2
33.33% Functions 2/6
87.5% Lines 70/80

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 811x 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;