How to convert enum number to string in React with Typescript?

Question

My enum looks like this:

export enum OrderType {
  ORDER_TYPE_UNSPECIFIED = 0,
  ASAP = 1
  SCHEDULED = 2
  CATERING = 4,
  UNRECOGNIZED = -1,
}

Below I already have a function orderTypeToJSON:

export function orderTypeToJSON(object: OrderType): string {
  switch (object) {
    case OrderType.ORDER_TYPE_UNSPECIFIED:
      return 'ORDER_TYPE_UNSPECIFIED';
    case OrderType.ASAP:
      return 'ASAP';
    case OrderType.SCHEDULED:
      return 'SCHEDULED';
    case OrderType.CATERING:
      return 'CATERING';
    default:
      return 'UNKNOWN';
  }
}

In OrderList component I map through orders (3 orders with corresponding OrderTypes: OrderType.ASAP, OrderType.SCHEDULED, OrderType.CATERING) and for each order return OrderCard:

 {orderList.map(order => (
          <OrderCard
            key={order.orderId}
            customerName={order.customer?.name}
            orderType={order.type}
            batchId={order.batchId}
            batchedOrderTitle="BATCHED"
            groupId={order.groupId}
            groupedOrderTitle="GROUPED"
            address={order.address}
            driverName={order.assignedDriverId}
          />
        ))}

In browser it displays 1, 2 or 4. Instead, I need to display 'ASAP' as a string (if it's 1), 'SCHEDULED' if it's 2 and 'CATERING' if it's 4.

NOTE: I'm not allowed to touch enum or somehow change it at all.

I've tried using conditional rendering in OrderCard like:

{OrderType.ASAP && <p>ASAP</p>}
{OrderType.SCHEDULED && <p>SCHEDULED</p>}
{OrderType.CATERING && <p>CATERING</p>}

When I do that it overrides all orders and displays only 'ASAP' for all 3 orders.

The following logic didn't work as well:

{OrderType.ASAP ? (
          <p>ASAP</p>
        ) : OrderType.SCHEDULED ? (
          <p>SCHEDULED</p>
        ) : (
          <p>CATERING</p>
        )}

I assume I need to use function orderTypeToJSON but I don't know where to put it (in parent component OrderList or in child OrderCard) and how to apply it in render method so it shows strings 'ASAP', 'SCHEDULED' and 'CATERING'.

Any advice is appreciated.

Does this answer your question? [How to get names of enum entries?](https://stackoverflow.com/questions/18111657/how-to-get-names-of-enum-entries) — Quentin Grisel, Feb 07 '22 at 21:51

score 0 · Answer 1 · answered Feb 07 '22 at 21:47

0

Use a map:

let orderTypeToNameMap = {
   OrderType.ASAP: "ASAP",
   OrderType.SCHEDULED: "Scheduled",
   OrderType.CATERING: "Catering"
};

Then when you want to access the name:

<p>{orderTypeToNameMap[order.type]}</p>

Make sense?

answered Feb 07 '22 at 21:47

jhmckimm

870
6
15

Quentin Grisel · Accepted Answer · 2022-02-07T23:07:57.173

0

Just need to write your enum value as follow : OrderType[OrderType.ASAP]. It is a feature of typescript. Here is an example :

import React from 'react';
import { ButtonCounter } from './components/ButtonCounter';

enum OrderType {
  ORDER_TYPE_UNSPECIFIED = 0,
  ASAP = 1,
  SCHEDULED = 2,
  CATERING = 4,
  UNRECOGNIZED = -1,
}

export const App = () => {
  return <div>{OrderType[OrderType.ASAP]}</div>;
};

This will display ASAP as a string.

edited Feb 07 '22 at 23:07

answered Feb 07 '22 at 21:52

Quentin Grisel

4,794
1
10
15

Unfortunately, I'm not allowed to change enums. They are pre-defined and approved by the client. – BBeknaz0904 Feb 07 '22 at 22:50
@BBeknaz0904 There is no change to operate, I may need to explain my answer a bit more : keep your enum as is, and if you want to get the text instead of the number, just write it as I said, it is a typescript feature that allow you to do that. Others current answers here doesn't make sens since it is already implemented by typescript. – Quentin Grisel Feb 07 '22 at 23:02
Your code displays ASAP for all 3 orders. Sorry If my question wasn't clear. I need to write something in OrderCard so it automatically renders the corresponding type (ASAP | SCHEDULED | CATERING) for each order. – BBeknaz0904 Feb 07 '22 at 23:29
@BBeknaz0904 I just gave you the way to write it. Let's be even clearer : an enum is translated as a number as you already noticed. Writing `OrderType[OrderType.ASAP]` is the same than writing `OrderType[1]`. So, since you already stored the number in`order.type`, just write it : `OrderType[order.type]`. If the same value is displayed after you made this change, then it means your `order` is incorrect/contains the same value for all your `order.type`. – Quentin Grisel Feb 08 '22 at 00:07

score -1 · Answer 3 · answered Feb 07 '22 at 21:51

-1

You can run your function on the order.type like this:

{orderList.map(order => (
          <OrderCard
            key={order.orderId}
            customerName={order.customer?.name}
            orderType={orderTypeToJSON(order.type)}  // here
            batchId={order.batchId}
            batchedOrderTitle="BATCHED"
            groupId={order.groupId}
            groupedOrderTitle="GROUPED"
            address={order.address}
            driverName={order.assignedDriverId}
          />
        ))}

have a look at the ts-playground here

answered Feb 07 '22 at 21:51

Adnan Sheikh

169
1
4

Good option. However, because orderType is of type OrderType it throws an error: 'Type 'string' is not assignable to type 'OrderType'.ts(2322) index.tsx(7, 3): The expected type comes from property 'orderType' which is declared here on type 'IntrinsicAttributes & OrderCardProps' (JSX attribute) OrderCardProps.orderType: OrderType''. I can add string to property like: orderType: OrderType | string. This way error is gone. Do you know a better way to solve this? I don't know if I'll receive a feedback for adding type string to types pre-approved by the client. – BBeknaz0904 Feb 07 '22 at 22:56
@BBeknaz0904 you can use the answer by Quentin, that's the best. Even I learned something here `OrderType[order.type]` can be used to access enums value. – Adnan Sheikh Feb 09 '22 at 14:13

How to convert enum number to string in React with Typescript?

3 Answers3