Forms in React

3 min readJan 11, 2023

I know you’ve heard of it. What is the use of form? You already know about it. So I will not talk more about the forms. These are the common uses of form in websites -

1- Contact , or get in touch form
2- Uploading content , files
3- Medium writing widgets and LinkedIn search widgets
4- Authentication
5- Like(Form as Button) , comment

We are going to develop the contact application.

Building the Contact Form

Building a contact app in React involves several steps, such as setting up the project, creating the form, handling form submission, and displaying the contact data. Here’s a general outline of how you might go about building a contact app in React:

Set up the project:

Create a new React project using create-react-app or any other tool you prefer

Create the form:

Use controlled components to create the form fields for capturing the user’s name, email, and message
Handle input validation and display error messages as appropriate
Implement a submit button and handle the form submission event

Handling form submission:

In the form submission event handler, you can make a server call to send the form data to the server, where it will be stored in the database or sent via email.
It is important to make sure that the form data is handled securely and that CSRF protection is implemented.

Displaying the contact data:

Once the form data has been received by the server, it can be used to display a list of contacts, which can be implemented as a separate component
This component can be designed to make an API call to fetch the contact data from the server and display it in a table or list format.
you can also add pagination feature and filter feature so that user can easily navigate through the contact list.

Final touches:

Add styling to the app to make it look presentable
Test the app thoroughly to make sure everything is working as expected
Finally, you can deploy the app to a hosting service so that it can be accessed by users.

import React, { useState } from 'react';
import axios from 'axios';

function Contact() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [contacts, setContacts] = useState([]);  const handleSubmit = async (event) => {
    event.preventDefault();
    const contact = { name, email, message };
    try {
       const response = await axios.post("/api/contacts", contact);
       const newContacts = [...contacts, response.data];
       setContacts(newContacts);
    } catch(error) {
       console.error(error);
    }
  };  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            value={name}
            onChange={e => setName(e.target.value)}
          />
        </label>
        <br />
        <label>
          Email:
          <input
            type="email"
            value={email}
            onChange={e => setEmail(e.target.value)}
          />
        </label>
        <br />
        <label>
          Message:
          <textarea value={message} onChange={e => setMessage(e.target.value)} />
        </label>
        <br />
        <button type="submit">Send</button>
      </form>
      <h2>Contacts</h2>
      <ul>
        {contacts.map((contact, index) => (
          <li key={index}>
            {contact.name}, {contact.email}, {contact.message}
          </li>
        ))}
      </ul>
    </div>
  );
}export default Contact;

The form submission event is handled by the handleSubmit function, which creates an object with the contact data and then makes a post request using axios to an endpoint '/api/contacts' on the server. In this example we are using the 'useState' hook to manage the state of input fields, while that can also be done by using a class based component and this.state It also show how you can use map method to render the contact list.