How to Send Form Data in React: Simple Guide with Example

In React, send form data by using useState to track input values and handle form submission with a onSubmit event handler. Collect the data from state and send it via fetch or other methods when the form is submitted.

Syntax

Use useState to store form input values. Attach onChange handlers to inputs to update state. Use onSubmit on the form to handle sending data.

• useState: stores input values
• onChange: updates state on input change
• onSubmit: handles form submission

javascript

const [formData, setFormData] = useState({ fieldName: '' });

function handleChange(event) {
  setFormData({ ...formData, [event.target.name]: event.target.value });
}

function handleSubmit(event) {
  event.preventDefault();
  // send formData to server or process it
}

Example

This example shows a simple form with a name input. It updates state on typing and alerts the data on submit.

javascript

import React, { useState } from 'react';

export default function SimpleForm() {
  const [formData, setFormData] = useState({ name: '' });

  function handleChange(event) {
    setFormData({ ...formData, [event.target.name]: event.target.value });
  }

  function handleSubmit(event) {
    event.preventDefault();
    alert(`Form submitted with name: ${formData.name}`);
  }

  return (
    <form onSubmit={handleSubmit} aria-label="Simple form">
      <label htmlFor="name">Name:</label>
      <input
        id="name"
        name="name"
        type="text"
        value={formData.name}
        onChange={handleChange}
        required
        aria-required="true"
      />
      <button type="submit">Send</button>
    </form>
  );
}

Output

A form with a text input labeled 'Name' and a 'Send' button. Typing updates the input. On clicking 'Send', an alert shows the entered name.

Common Pitfalls

Common mistakes include:

• Not preventing default form submission with event.preventDefault(), causing page reload.
• Not updating state on input change, so input stays empty or uncontrolled.
• Using uncontrolled inputs without value and onChange, which can cause React warnings.

javascript

import React, { useState } from 'react';

function WrongForm() {
  function handleSubmit(event) {
    // Missing event.preventDefault() causes page reload
    alert('Submitted');
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" /> {/* No value or onChange, uncontrolled input */}
      <button type="submit">Send</button>
    </form>
  );
}

// Correct way:
function RightForm() {
  const [name, setName] = useState('');
  function handleSubmit(event) {
    event.preventDefault();
    alert(`Name: ${name}`);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input
        name="name"
        value={name}
        onChange={e => setName(e.target.value)}
        required
      />
      <button type="submit">Send</button>
    </form>
  );
}

Quick Reference

• useState: Store input values.
• onChange: Update state on input change.
• onSubmit: Handle form submission and prevent default.
• Controlled inputs: Use value and onChange together.
• Send data: Use fetch or other methods inside handleSubmit.

Key Takeaways

Use useState to track form input values as controlled components.

Always prevent default form submission with event.preventDefault() in onSubmit.

Update state on every input change using onChange handlers.

Send collected form data inside the onSubmit handler using fetch or other methods.

Avoid uncontrolled inputs by always linking value and onChange.