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

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.

CodePudding user response：

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?

CodePudding user response：

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.

CodePudding user response：

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