{"size": 2291, "ext": "js", "max_stars_repo_path": "src/components/Form.js", "max_stars_repo_name": "MasonNewell/react-portfolio", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Form.js", "max_issues_repo_name": "MasonNewell/react-portfolio", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Form.js", "max_forks_repo_name": "MasonNewell/react-portfolio", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.1157894737, "max_line_length": 84, "alphanum_fraction": 0.5399388913}
import React, { useState } from "react";
import "../styles/Form.css";
import { Form, Container } from "react-bootstrap";
import { validateName, validateEmail, validateMessage } from "../utils/helpers";

function ContactForm() {
  // Name, Email, Message
  const [inputFields, setInputFields] = useState({
    name: "",
    email: "",
    message: "",
  });

  // Error
  const [errorMessage, setErrorMessage] = useState("");

  // Form inputs
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    // Copy old object, change a key value pair
    const newInput = {
      ...inputFields,
      [name]: value,
    };
    setInputFields(newInput);
  };

  //   Form submit
  const handleFormSubmit = (e) => {
    e.preventDefault();
    // Validate fields
    if (!validateName(inputFields.name)) {
      setErrorMessage("Name required.");
      return;
    }
    if (!validateEmail(inputFields.email)) {
      setErrorMessage("Invalid email address.");
      return;
    }
    if (!validateMessage(inputFields.message)) {
      setErrorMessage("Message field required.");
      return;
    }

    // Clear fields
    setInputFields({
      name: "",
      email: "",
      message: "",
    });
    setErrorMessage("");
  };

  return (
    <div>
      <Container>
        <form className="form">
          <input
            value={inputFields.name}
            className="form-control mb-3"
            name="name"
            onChange={handleInputChange}
            type="text"
            placeholder="name"
          />
          <input
            value={inputFields.email}
            className="form-control mb-3"
            name="email"
            onChange={handleInputChange}
            type="email"
            placeholder="email"
          />
          <input
            value={inputFields.message}
            className="form-control mb-3"
            name="message"
            onChange={handleInputChange}
            type="text"
            placeholder="message"
          />
          <div>
            <p>{errorMessage}</p>
          </div>
          <button className="btn btn-dark" type="button" onClick={handleFormSubmit}>
            Submit
          </button>
        </form>
      </Container>
    </div>
  );
}

export default ContactForm;
