How do you handle form submission in React?

Use an onSubmit handler that calls e.preventDefault() and processes data using current state values.

How do you handle forms in React? | FullStackPrep.Dev

Q: What is a controlled component in React?

An input whose value is managed by React using state and updated via the onChange handler.

💡 Concept Name

Form Handling in React – Managing form input values and submission using controlled components and React state.

📘 Quick Intro

React handles form elements like inputs, checkboxes, and selects using component state. Controlled components use value and onChange props to sync input with state, allowing full control over form behavior and validation.

🧠 Analogy / Short Story

Think of a form as a notebook where a teacher asks students to write answers. In traditional HTML, students write and submit the notebook as-is. In React, the teacher watches every keystroke, recording answers live in another notebook — that’s your state.

This means the teacher (React) always knows what the answer is, can validate it immediately, and decide when it should be submitted or corrected — ensuring a smarter, reactive experience.

🔧 Technical Explanation

📥 Inputs in React are typically controlled components linked to state.
🧠 You use useState to hold and update input values.
📤 On form submit, use an onSubmit handler to manage validation and further logic.
🧼 You can reset fields by updating state back to empty values.
🔐 Validations can be handled manually or via libraries like Formik, React Hook Form, or Yup.

💻 Real Code Example


import React, { useState } from 'react';

function SimpleForm() {
  const [name, setName] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    console.log('Submitted name:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <button type="submit">Submit</button>
      {submitted && <p>Thank you, {name}!</p>}
    </form>
  );
}

❓ Interview Q&A

Q1: What is a controlled component in React?
A: An input element whose value is controlled by React state using value and onChange props.

Q2: Why use controlled components?
A: They offer full control over input data, enable validation, and help maintain a single source of truth for form state.

Q3: How do you prevent default form submission behavior?
A: Use e.preventDefault() in the submit handler.

Q4: Can you use multiple inputs with one state object?
A: Yes, by managing state as an object and using the input name to update its corresponding property.

Q5: How is form validation handled in React?
A: You can write custom validation logic or use libraries like Formik or React Hook Form.

Q6: What’s the role of the onChange event in forms?
A: It updates the component's state every time the user types or selects something.

Q7: How do you reset a form in React?
A: By setting the state values back to initial values (usually empty strings).

Q8: Can uncontrolled components be used in React?
A: Yes, using useRef, but they’re less common in complex form handling scenarios.

Q9: How do you submit a form only when fields are valid?
A: Check conditions inside the onSubmit handler before processing the submission.

Q10: What’s the benefit of using form libraries in React?
A: They simplify state management, validation, error display, and performance for large forms.

📝 MCQs

Q1. What is a controlled component in React?

A component without state
An input whose value is tied to state
A static input field
A default HTML element

Q2. Which hook is commonly used for managing form state?

useEffect
useReducer
useState
useRef

Q3. What prevents a form from reloading the page on submit?

return false
setState()
console.log()
e.preventDefault()

Q4. How do you update input value in state?

With innerHTML
Using onChange handler
By form submit
Via props

Q5. How do you display a thank-you message after submit?

Use alert()
Show error field
Use a submitted state flag
Disable the form

Q6. Which form library is popular in React?

Tailwind
Express
Formik
Redux Toolkit

Q7. How can you reset form fields?

Use reload()
Disable inputs
By resetting state to initial values
Call default() method

Q8. What does onChange do?

Triggers a render
Submits form
Updates component state
Reloads the DOM

Q9. Is React Hook Form a built-in hook?

Yes
No, it's a third-party library
Yes, from useReducer
It's a middleware

Q10. When should you use controlled components?

When using server-rendered forms
Only in class components
When you need full control and validation
For animations

💡 Bonus Insight

React forms shine with controlled inputs, but you can optimize large forms using useReducer or external libraries. Validation libraries like Yup paired with Formik or RHF provide schema-based validation that's clean and scalable.

📄 PDF Download

Need a handy summary for your notes? Download this topic as a PDF!

📄 PDF Download Coming Soon

How do you handle forms in React?