How to Handling Forms Input Fields in ReactJS | Form in react js functional component

Building interactive web applications requires the ability to handle forms in ReactJS. Effectively gathering and handling user input is crucial for each type of form, including registration, feedback, and login forms. Form inputs in React are often handled as controlled components, meaning that the useState hook is used to directly bind the input values to the state of the component.

In conventional HTML, the browser handles input values automatically. But in React, you manage form data yourself, giving you complete control over how the input behaves. This enables dynamic recommendations, input limitations, real-time validation, and more.

In this tutorial, we’ll build a simple form that accepts a user’s name. As the user types, the input value is updated in real-time using state. On form submission, we display a custom welcome message. You’ll learn how to bind input fields to state, handle onChange and onSubmit events, and prevent default form behavior.

👉 Download Free Ebook →

👉 Get Free Course →

✅ Example: Basic Form Handling in ReactJS

🧩 React Functional Component (HTML + JavaScript)

```
 
```

 import React, { useState } FROM 'react';

```
 
```
```
FUNCTION SimpleForm() {
```
```
  const [name, setName] = useState('');
```

  const [greeting, setGreeting] = useState('');

```
 
```
```
  const handleSubmit = (e) => {
```

    e.preventDefault(); // prevent page reload

    setGreeting(`Hello, ${name}! 👋`);

```
    setName('');
```
```
  };
```
```
 
```
```
  RETURN (
```

    <div STYLE={{ fontFamily: 'Arial', padding: '20px' }}>

      <h2>📄 ReactJS Form Example</h2>

```
      <form onSubmit={handleSubmit}>
```
```
        <INPUT
```
```
          TYPE="text"
```
```
          placeholder="Enter your name"
```
```
          VALUE={name}
```

          onChange={(e) => setName(e.target.value)}

          STYLE={{ padding: '10px', width: '60%', marginRight: '10px' }}

```
        />
```

        <button TYPE="submit" STYLE={{ padding: '10px 20px' }}>

```
          Submit
```
```
        </button>
```
```
      </form>
```
```
 
```
```
      {greeting && (
```

        <p STYLE={{ marginTop: '20px', fontWeight: 'bold' }}>{greeting}</p>

```
      )}
```
```
    </div>
```
```
  );
```
```
}
```
```
 
```
```
export DEFAULT SimpleForm;
```

The main goal of React form handling is to connect form fields to component state. As a result, you have complete control over how the form behaves and may incorporate sophisticated features like conditional rendering, dynamic validation, and real-time updates. You’ll feel comfortable handling intricate form structures in bigger projects if you start with basic shapes like the one above.

🧠 Key Concepts Covered:

Controlled input field using value and onChange
State management using useState
Handling onSubmit with form event
Preventing default behavior using e.preventDefault()

FAQ (Frequently Asked Questions)

How do you collect form input values in React?

Add a form with a single text input field inside your component's return statement. Bind the input value to your state variable and update the state every time the input changes. Add a paragraph tag below the form to display the current input value.

Handling User Input in React

User input in React is managed using state and props. Form components use state to track input changes and props to trigger these changes. The form elements' values are stored in the state and updated through event handlers.

How to validate input field in React JS?

Handle Input Changes: Attach event handlers to input fields to capture user input and update state. Perform Validation: Implement validation logic within the event handlers or separate validation functions. Set validation error messages in the state.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

How to Handling Forms Input Fields in ReactJS | Form in react js functional component | Handling Forms and User Input in React