Handling Form Inputs in React

📝 Handling Form Inputs in React (English)

React makes handling form inputs straightforward with controlled components. Here's a complete guide to help you handle form inputs effectively using modern React practices.


✅ 1. What Are Controlled Components?

A controlled component is a form input element whose value is controlled by React state.


Example:


jsx

Copy

Edit

<input type="text" value={name} onChange={handleChange} />

🛠️ 2. Basic Form Example

Here’s how to handle a simple form with name and email fields:


✅ Functional Component with Hooks

jsx

Copy

Edit

import React, { useState } from 'react';


function ContactForm() {

  const [formData, setFormData] = useState({

    name: '',

    email: ''

  });


  const handleChange = (e) => {

    const { name, value } = e.target;

    setFormData(prev => ({

      ...prev,

      [name]: value

    }));

  };


  const handleSubmit = (e) => {

    e.preventDefault();

    console.log('Form submitted:', formData);

  };


  return (

    <form onSubmit={handleSubmit}>

      <label>

        Name:

        <input name="name" value={formData.name} onChange={handleChange} />

      </label>

      <br />

      <label>

        Email:

        <input name="email" value={formData.email} onChange={handleChange} />

      </label>

      <br />

      <button type="submit">Submit</button>

    </form>

  );

}

📑 3. Handling Different Input Types

a. Text Input

jsx

Copy

Edit

<input type="text" name="username" value={formData.username} onChange={handleChange} />

b. Checkbox

jsx

Copy

Edit

<input

  type="checkbox"

  name="subscribe"

  checked={formData.subscribe}

  onChange={(e) =>

    setFormData(prev => ({ ...prev, subscribe: e.target.checked }))

  }

/>

c. Radio Buttons

jsx

Copy

Edit

<input

  type="radio"

  name="gender"

  value="male"

  checked={formData.gender === 'male'}

  onChange={handleChange}

/>

<input

  type="radio"

  name="gender"

  value="female"

  checked={formData.gender === 'female'}

  onChange={handleChange}

/>

d. Select Dropdown

jsx

Copy

Edit

<select name="country" value={formData.country} onChange={handleChange}>

  <option value="">Select</option>

  <option value="US">United States</option>

  <option value="CA">Canada</option>

</select>

🧼 4. Validation Example

Basic example:


jsx

Copy

Edit

const handleSubmit = (e) => {

  e.preventDefault();

  if (!formData.email.includes('@')) {

    alert('Invalid email');

    return;

  }

  console.log('Form is valid:', formData);

};

For more advanced validation, consider libraries like:


Formik


react-hook-form


Yup (for schema validation)


🔁 5. Two-Way Binding

In React, binding form inputs to state (and updating state on change) enables two-way binding.


jsx

Copy

Edit

<input

  type="text"

  name="username"

  value={formData.username}

  onChange={handleChange}

/>

Here, the input value is always synced with formData.username.


📦 Summary

Feature Best Practice

Text inputs Use value + onChange

Checkboxes Use checked for Boolean

Form submission Use e.preventDefault()

Validation Manual or with a library

Controlled components Always bind to state

Learn React JS Course in Hyderabad

Read More

Building a Theme Toggler with useContext

How to Use useLayoutEffect Effectively

Visit Our Quality Thought Training in Hyderabad

Get Directions 

Comments

Post a Comment

Popular posts from this blog

Understanding Snowflake Editions: Standard, Enterprise, Business Critical

Understanding Snowflake Editions: Standard, Enterprise, Business Critical Snowflake offers several service editions to meet different business needs. These editions provide increasing levels of features, security, and compliance, depending on your organization's size, industry, and regulatory requirements. 1. Standard Edition Best for: Small to mid-sized teams or businesses that need core data warehousing features without advanced compliance needs. Key Features: Fully managed, cloud-native data platform Support for structured and semi-structured data Virtual warehouses for compute scaling Time Travel (1 day) – lets you query past versions of data Secure data sharing between Snowflake accounts Basic security with role-based access control Use Case Example: Startups or small companies analyzing business data without strict data compliance needs. 2. Enterprise Edition Best for: Organizations that need more control, scalability, and longer data retention. Includes everything in Standar...
Read more

Why Data Science Course?

Why Data Science Course? A Data Science course is valuable for several reasons: 1.Growing Job Market The demand for data scientists is increasing globally, with companies actively hiring professionals with data skills. Many industries, including healthcare, banking, and technology, rely on data science for better decision-making. 2. Diverse Career Options You can work as a Data Scientist, Data Analyst, Machine Learning Engineer, AI Specialist, Business Analyst, or Big Data Engineer. Data science skills are useful in various industries like finance, retail, healthcare, education, and sports analytics. 3. Develops Critical Thinking & Problem-Solving Skills A data science course helps you analyze complex problems, interpret data, and develop innovative solutions. Encourages logical reasoning, pattern recognition, and data-driven decision-making. 4. Learn Advanced Technologies & Tools Gain hands-on experience with tools like Python, R, SQL, TensorFlow, Tableau, Hadoop, and Power BI...
Read more

How To Do Medical Coding Course?

Medical coding is a great career choice, and there are different ways to get trained and certified. Here’s a step-by-step guide on how to do a medical coding course: Step 1: Understand Medical Coding Medical coding involves translating healthcare services, diagnoses, procedures, and equipment into standardized codes. These codes are used for billing and insurance purposes. Common coding systems: ICD-10-CM (Diagnosis Codes) CPT (Procedure Codes) HCPCS (Supplies & Services) Step 2: Choose the Right Course You can take medical coding courses from: Universities & Community Colleges (Online & In-person) Professional Organizations (AAPC, AHIMA) Online Platforms (Coursera, Udemy, edX) Step 3: Select a Certification Path The most recognized certifications include: Certified Professional Coder (CPC) – AAPC (Most popular) Certified Coding Specialist (CCS) – AHIMA (Hospital-based coding) Certified Inpatient Coder (CIC) – AAPC Certified Outpatient Coder (COC) – AAPC Step 4: Enroll in a...
Read more