How to use Enums in React TS project

July 1, 2024

In this tutorial, we will see how to how you can leverage enums in TypeScript to make your application typesafe, improve compile time and reduce chances to add bugs in your app.

Step 1: Set Up the Project

Follow the steps mentioned earlier to create a new React TypeScript project using Create React App.

Step 2: Define the PaymentMethod Enum

Create a new file named enums.ts in the src folder and define the PaymentMethod enum as follows:

1export enum PaymentMethod {
2 CreditCard = "CreditCard",
3 PayPal = "PayPal",
4 BankTransfer = "BankTransfer",
5}
6

Step 3: Create Components

Create two components, one for each scenario: with and without enums.

Component 1: PaymentFormWithEnums.tsx

Create a new file named PaymentFormWithEnums.tsx in the src folder:

1import React, { useState } from "react";
2import { PaymentMethod } from "./enums";
3
4const PaymentFormWithEnums: React.FC = () => {
5 const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<PaymentMethod>(PaymentMethod.CreditCard);
6
7 const handlePaymentMethodChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
8 const selectedMethod = event.target.value as PaymentMethod;
9 setSelectedPaymentMethod(selectedMethod);
10 };
11
12 return (
13 <div>
14 <h2>Payment Form (With Enums)</h2>
15 <div>
16 <label htmlFor="paymentMethod">Select Payment Method:</label>
17 <select id="paymentMethod" value={selectedPaymentMethod} onChange={handlePaymentMethodChange}>
18 {Object.values(PaymentMethod).map((method) => (
19 <option key={method} value={method}>
20 {method}
21 </option>
22 ))}
23 </select>
24 </div>
25 <p>Selected Payment Method: {selectedPaymentMethod}</p>
26 </div>
27 );
28};
29
30export default PaymentFormWithEnums;
31

Component 2: PaymentFormWithoutEnums.tsx

Create another file named PaymentFormWithoutEnums.tsx in the src folder:

1import React, { useState } from "react";
2
3const PaymentFormWithoutEnums: React.FC = () => {
4 const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<string>("CreditCard");
5
6 const handlePaymentMethodChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
7 const selectedMethod = event.target.value;
8 setSelectedPaymentMethod(selectedMethod);
9 };
10
11 return (
12 <div>
13 <h2>Payment Form (Without Enums)</h2>
14 <div>
15 <label htmlFor="paymentMethod">Select Payment Method:</label>
16 <select id="paymentMethod" value={selectedPaymentMethod} onChange={handlePaymentMethodChange}>
17 <option value="CreditCard">Credit Card</option>
18 <option value="PayPal">PayPal</option>
19 <option value="BankTransfer">Bank Transfer</option>
20 </select>
21 </div>
22 <p>Selected Payment Method: {selectedPaymentMethod}</p>
23 </div>
24 );
25};
26
27export default PaymentFormWithoutEnums;
28

Step 4: Use the Components in App

Use the two components in the App.tsx file:

1import React from "react";
2import PaymentFormWithEnums from "./PaymentFormWithEnums";
3import PaymentFormWithoutEnums from "./PaymentFormWithoutEnums";
4
5const App: React.FC = () => {
6 return (
7 <div className="App">
8 <header className="App-header">
9 <PaymentFormWithEnums />
10 <PaymentFormWithoutEnums />
11 </header>
12 </div>
13 );
14};
15
16export default App;
17

Step 5: Run the Application

Run the application using the command:

npm start So, let's see how would you add InteracTranfer to both with and without enums example.

In the case of without enums, you would need to add the option in the select, something like this

1<option value="BankTransfer">Bank Transfer</option>

and in the case of with enum example, you would need to add that to enum.ts.

1export enum PaymentMethod {
2 CreditCard = "CreditCard",
3 PayPal = "PayPal",
4 BankTransfer = "BankTransfer",
5 InteracTransfer = "InteracTransfers", //add here
6}
7

You would think, its no big deal, because its just one place to add in the case of without enum example, but adding 10 or 100 option, manually would first be tedious and second is just not good practice.

Adding those to enums, first make your code less prone to error and second make it more type safe. You will not accidentally misspell or add some value that shouldn't be there.

Enums improve the readability of your code, give you better compile time validation and your code will be easy to maintaine. But nothing beats the autocomplete and intellisene you would get from using enums 😉.

Share this article