I used to use Elm language. It should have an state on the page (such as normal, loading, error) and I can write in Elm language like this

type Action = Choose | Edit | Confirm

type ModalType = Address | Payment | Tax

type State
   = Normal
   | PopupModal ModalType Action
   | Error String


// and use like this
Normal (normal state)
PopupModal Address Choose (Popupmodal state)
Error "something went wrong" (Error state)

It's mean If you want to use a PopupModal state, you should send Action and ModalType as a parameter. or if you want to Normal state, you don't send anything.

So, I want to use this concept in React. It has 2 state(Normal and Popup modal) and "Popup modal" state has 3 state(choose, edit, confirm)

Is it the best way to use this concept in React? If it is best, how can I write it in React?

for now, I write it like this

const ACTION = Object.freeze({
  CHOOSE: "CHOOSE",
  EDIT: "EDIT",
  CONFIRM: "CONFIRM",
});

const MODAL_TYPE = Object.freeze({
  ADDRESS: "ADDRESS",
  PAYMENT: "PAYMENT",
  TAX: "TAX",
});

const STATE = Object.freeze({
  NORMAL: "NORMAL",
  MODAL: (type, action) => {
    switch (type) {
      case MODAL_TYPE.ADDRESS:
        return <Address action={action} />
      case MODAL_TYPE.PAYMENT:
        return <Payment action={action} />
      case MODAL_TYPE.TAX:
        return <Tax action={action} />
      default:
        break;
    }
  },
});

const render = (state) => (type, action) => {
  switch (state) {
    case STATE.NORMAL:
      return <Normal />;
    case STATE.MODAL:
      return state(type, action);
    default:
      break;
  }
};

// Normal state
render(STATE.NORMAL)()

// Popup modal state
render(STATE.MODAL)(MODAL_TYPE.PAYMENT, ACTION.CHOOSE)
render(STATE.MODAL)(MODAL_TYPE.TAX, ACTION.CHOOSE)