Access Form Data in React (TypeScript): A Beginner's Guide (2026)

Understanding how to handle form data in React, especially using TypeScript, is vital for building interactive web applications. Whether you're creating a simple signup form or a complex data entry system, knowing how to access and manage form data efficiently is key. In this guide, we'll walk through creating a signup page with React and TypeScript, focusing on accessing form data in a POST request, a common scenario many developers encounter.

Key Takeaways

• Learn how to manage form state using React hooks.
• Understand how to handle form submissions and access form data.
• Learn the basics of TypeScript for typing form data.
• See how to implement form validation and error handling.

Our example will involve creating a signup page with two input fields: first name and last name. Upon submission, the form data will be processed, and users will be redirected to a 'complete' page displaying their names. This guide is particularly aimed at beginners who are new to React and TypeScript but have basic JavaScript knowledge.

Prerequisites

• Basic understanding of JavaScript and React.
• Familiarity with TypeScript syntax.
• Node.js and npm installed on your machine.

Step 1: Set Up Your React Project

First, we'll create a new React project using Create React App with TypeScript support. Open your terminal and run the following command:

npx create-react-app signup-form --template typescript

This command generates a new React project with TypeScript already configured, providing a solid foundation for our task.

Step 2: Create the Signup Form Component

Create a new component called SignupForm.tsx inside the src directory. This component will contain the form structure.

import React, { useState } from 'react';

type FormData = {
  firstName: string;
  lastName: string;
};

export default function SignupForm() {
  const [formData, setFormData] = useState({ firstName: '', lastName: '' });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Here, we would typically submit the data to a server
    console.log('Form data submitted:', formData);
    window.location.href = `/complete?firstName=${formData.firstName}&lastName=${formData.lastName}`;
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>First Name:</label>
        <input type="text" name="firstName" value={formData.firstName} onChange={handleInputChange} required />
      </div>
      <div>
        <label>Last Name:</label>
        <input type="text" name="lastName" value={formData.lastName} onChange={handleInputChange} required />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

In this code, we define a FormData type to represent our form's state. The useState hook manages this state, while the handleInputChange function updates the form state as users type.

Step 3: Handling Form Submission

Form submission is handled by the handleSubmit function. It prevents the default form submission behavior using e.preventDefault() and redirects the user to a 'complete' page while logging the form data.

The use of URL parameters in this example is convenient for demonstration, but in a real-world application, you would typically send this data to a backend server using a POST request.

Step 4: Redirect and Display Submitted Data

To simulate the redirection, we'll create a Complete.tsx component that retrieves the URL parameters and displays the submitted names.

import React from 'react';
import { useLocation } from 'react-router-dom';

export default function Complete() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const firstName = queryParams.get('firstName');
  const lastName = queryParams.get('lastName');

  return (
    <div>
      <h1>Thank you for signing up!</h1>
      <p>Welcome, {firstName} {lastName}!</p>
    </div>
  );
}

This component uses React Router's useLocation hook to access the URL parameters and display the user's first and last name.

Common Errors/Troubleshooting

While working with forms, you might encounter common issues such as:

• State Not Updating: Ensure that your input field's name attribute matches the state keys.
• Type Errors: TypeScript may throw errors if you don’t define types correctly. Double-check your type definitions.
• Form Not Submitting: Verify that your handleSubmit function is correctly preventing default behavior and that the form has a valid onSubmit handler.

Frequently Asked Questions

How do I submit form data using POST instead of GET?

Use fetch or axios to send a POST request to your server with the form data in the request body.

Why use TypeScript with React?

TypeScript provides static typing, which helps catch errors during development, making code more predictable and easier to debug.

Can I use class components instead of functional components?

Yes, but functional components with hooks are more modern and preferred for their simplicity and easier state management.

Frequently Asked Questions

How do I submit form data using POST instead of GET?

Use fetch or axios to send a POST request to your server with the form data in the request body.

Why use TypeScript with React?

TypeScript provides static typing, which helps catch errors during development, making code more predictable and easier to debug.

Can I use class components instead of functional components?

Yes, but functional components with hooks are more modern and preferred for their simplicity and easier state management.