For the past week, I have been working on implementing a contact form using React. Since I have also been learning React Hooks, I decided to implement my Contact Form as a functional component and use React Hooks instead of passing in props from App.js or storing local state in the ContactForm component itself.

The Requirements

• The contact form will take in 4 input fields: name, email address, subject and a free form message
• A submit button underneath the input fields
• A picture on the left of the input fields
• Form validation to check if the input fields are empty or the email input is not a valid input
• If there are any errors, show some red text right above the Submit button saying which input field is empty/ invalid.
• If all the input fields are correct display an alert with the text “Email Sent”

The Contact Form Component

I implement the Contact Form as a functional component, using the _useState _hook to store my state. The useState hook allows you to add React state to function components. First, for all my input fields I created state variables. The _useState _function takes in the initial value of your variable. Since all our variables are strings I initiated them using an empty string as the parameters of the useState.

P.S. I use the material-ui library to implement my form elements.

import React, { useState } from "react";

import { TextField, Button } from "@material-ui/core";
function CountactUs() {
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [subject, setSubject] = useState("");
  const [message, setMessage] = useState("");
return(
 <div> 
   <form>

   <form>
 </div>
)

The useState returns a pair of values: the current state and a function that updates it. We then destructure the returned values using the following syntax.

const [subject, setSubject] = useState("");

To capture the input from the user we use the function returned by useState which is set to the onChange function of the Textfields and the state variables updated by the e.target.value (event.target.value). What the code below is doing is registering any change to the text fields and setting them to the respective state variables.

<form> 
           <TextField label="Name" type ="text" onChange = {e => setName({name: e.target.value})}/>

           <TextField label="Email"  type ="email" onChange ={e => setEmail({email: e.target.value})}/>
<TextField label="Subject" type ="text"  onChange = {e => setSubject({subject: e.target.value})}/>
           <TextField label="Message" type ="text" " onChange  ={e => setMessage({message: e.target.value})}/>
          <Button color="primary" type="button">  Submit </Button>
          </form>

Error Validation

I created an array state variable for the error messages, which was initialized as an empty array, and another boolean state variable to determine whether to show or hide the errors.

const [errorMessages, setErrorMessages] = useState([]);

const [showErrors, setShowErrors] = useState(false);

I created a formValidation function that checked if the input fields were empty, or invalid.

I created a global errors array where I could push in the error messages appropriately. At the beginning of the formValidation method I reset the errorMessages state variable to an empty array so that every time a person submits the form the former errors are not stored.

#coding #javascript #react #women-in-tech