Web Developers : 19-Building Simple Forms with React

Screenshot from the tutorial

Building Simple Forms with React

In this blog post, we will explore how to build simple forms using React. Forms are a fundamental component of web applications, allowing user interaction and data collection. By the end of this tutorial, you will understand how to create and manage forms efficiently using React.

Table of Contents

• Prerequisites
• Setting Up Your React Environment
• Creating a Simple Form
• Managing Form State
• Handling Form Submission
• Validating Form Input
• Conclusion

Prerequisites

Before we start building forms in React, ensure you have the following prerequisites:

• Basic understanding of JavaScript and React.
• Node.js and npm (Node Package Manager) installed on your machine.
• A code editor like Visual Studio Code.

Setting Up Your React Environment

First, we need to set up a new React project. You can use Create React App for a quick setup.

Open your terminal and run the following command:

npx create-react-app simple-form
cd simple-form
npm start

This will create a new React application and start the development server.

Creating a Simple Form

Let's create a simple form that collects a user's name and email address. Open the src/App.js file and modify it as follows:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Simple Form</h1>
      <form>
        <div>
          <label htmlFor="name">Name:</label>
          <input type="text" id="name" />
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input type="email" id="email" />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

In this code, we have created a form with two input fields: one for the name and another for the email. We also included a submit button.

Managing Form State

To manage the form state, we will use React's useState hook. This allows us to track the values entered by the user. Update your App.js like this:

import React, { useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  return (
    <div>
      <h1>Simple Form</h1>
      <form>
        <div>
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            id="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

Here, we have introduced two state variables, name and email, and their corresponding setter functions. The value attribute of each input field is set to the respective state variable, and the onChange event updates the state as the user types.

Handling Form Submission

Next, we need to handle the form submission to prevent the default behavior and output the collected data. Modify the form tag in your App.js like this:

const handleSubmit = (e) => {
  e.preventDefault();
  alert(`Name: ${name}, Email: ${email}`);
};

<form onSubmit={handleSubmit}>
  {/* ...input fields... */}
</form>

Update your full App.js code:

import React, { useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Name: ${name}, Email: ${email}`);
  };

  return (
    <div>
      <h1>Simple Form</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            id="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

When the user submits the form, an alert will display the entered name and email.

Validating Form Input

To ensure that users enter valid data, you can add basic validation. For example, you can check if the fields are empty before submission.

Update your handleSubmit function like this:

const handleSubmit = (e) => {
  e.preventDefault();
  
  if (!name || !email) {
    alert('Please fill in all fields');
    return;
  }

  alert(`Name: ${name}, Email: ${email}`);
};

This validation checks if either the name or email field is empty and alerts the user accordingly.

Conclusion

Congratulations! You have successfully built a simple form using React. You have learned how to create form elements, manage their state, handle submission, and perform basic validation. Forms are a crucial aspect of most applications, and mastering them will greatly enhance your React skills.

For further learning, consider exploring more advanced topics such as controlled vs. uncontrolled components, custom hooks for forms, and integrating form libraries like Formik or React Hook Form.

Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios