In my last short guide, I went through the FormData API.

If you want to read more about it, check it out here - Form: Getting To Know FormData.

This article is going to be focused on how we integrate FormData into React with Typescript.

Let’s get right into it!

Building the form

1. Create the react component

touch form.tsx

2. Scaffold out the react component

Let’s create a file called form.tsx. It’ll just be a React Function component (FC).

// form.tsx

import { FC } from 'react';

const Form: FC = () => {
  return <form></form>;
}

export default Form;

3. Add the submit handler

We’re preventing the default behavior which is to do a form submission then reload and/or navigating to a new URL.

// form.tsx

import {
  FC,
  FormEvent,
} from 'react';

const Form: FC = () => {
  const handleFormSubmit = (event: FormEvent<HTMLFormElement>): void => {
    event.preventDefault();
    /* Handle submission logic */
  }
  return <form onSubmit={handleFormSubmit}></form>;
}

export default Form;

4. Add some form fields

Let’s add some form fields, these are just going to be basic HTML fields.

// form.tsx

import {
  FC,
  FormEvent,
} from 'react';

const Form: FC = () => {
  const handleFormSubmit = (event: FormEvent<HTMLFormElement>): void => {
    event.preventDefault();
    /* Handle submission logic */
  }
  return (
    <form onSubmit={handleFormSubmit}>
      <fieldset>
        <div>
          <input
            type="text"
            name="name"
            placeholder="Enter Your Name"
          />
        </div>
        <div>
          <select name="favoriteColor">
            <option value="">Favorite Color</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="pink">Pink</option>
            <option value="orange">orange</option>
          </select>
        </div>
        <div>
          <label>
            <input type="checkbox" name="hobbies[]" value="reading" />
            Reading
          </label>
          <br />
          <label>
            <input type="checkbox" name="hobbies[]" value="hiking" />
            Hiking
          </label>
          <br />
          <label>
            <input type="checkbox" name="hobbies[]" value="gardening" />
            Gardening
          </label>
          <br />
          <label>
            <input type="checkbox" name="hobbies[]" value="cooking" />
            Cooking
          </label>
        </div>
      </fieldset>
    </form>
  );
}

export default Form;

5. Integrate FormData

Finally, our form fields are done, let’s integrate that into our form.

// form.tsx

import {
  FC,
  FormEvent,
} from 'react';

const Form: FC = () => {
  const handleFormSubmit = (event: FormEvent<HTMLFormElement>): void => {
    event.preventDefault();
    /* Handle submission logic */
    const form: HTMLFormElement = (event.target as HTMLFormElement);
    if (form) {
      const formData = new FormData(form);
      for (let [formKey, formValue] of formData.entries()) {
        console.log(`formKey: ${formKey}, formValue: ${formValue}`);
      }
    }
  }
  return (
    <form onSubmit={handleFormSubmit}>
      <fieldset>
        <div>
          <input
            type="text"
            name="name"
            placeholder="Enter Your Name"
          />
        </div>
        <div>
          <select name="favoriteColor">
            <option value="">Favorite Color</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="pink">Pink</option>
            <option value="orange">orange</option>
          </select>
        </div>
        <div>
          <label>
            <input type="checkbox" name="hobbies[]" value="reading" />
            Reading
          </label>
          <br />
          <label>
            <input type="checkbox" name="hobbies[]" value="hiking" />
            Hiking
          </label>
          <br />
          <label>
            <input type="checkbox" name="hobbies[]" value="gardening" />
            Gardening
          </label>
          <br />
          <label>
            <input type="checkbox" name="hobbies[]" value="cooking" />
            Cooking
          </label>
        </div>
      </fieldset>
    </form>
  );
}

export default Form;

import { FC } from 'react';

const App = (): FC => {
  return (
    <RootLayout>
      <SideBar />
      <main>
        <ErrorBoundary>
          {children}
        </ErrorBoundary>
      </main>
    <RootLayout>
  );
}

Finished example

Check out the finished example in the github respository below 👇

And... that’s it!

If you like this post be sure to share it with someone you know!

Jerry Chang

BYTE-Sized

Digestable Content That Will Take You To The Next Level

Forms: FormData, React and Typescript