Чем заменить вложенные тернарники?

Question

[Дмитрий Брынцев]

Такой вопрос: Суть в том что есть некая очередность модалок показывающфяся друг за другом . Чем заменить тернарники? Код рабочий. Нужно заменить тернарник на удобочитаемый код.

export const ErrorBackendLoyut = (): JSX.Element => {
  const [openModal, setOpenModal] = useState(true)

  const [clickMessage, setClickMessage] = useState(false)

  const [writeMessage, setWriteMessage] = useState(false)

  const [sendMessage, setSendMessage] = useState(false)

  const handleCloseModal = (): void => {
    setOpenModal(false)
  }

  const openChoice = (): void => {
    setClickMessage(true)
  }

  const openMessage = (): void => {
    setWriteMessage(true)
  }

  const openThank = (): void => {
    setSendMessage(true)
  }

  return (
    <ModalBase
      isOpen={ openModal }
      isSwipe={ true }
      translate="bottom"
      onClose={ handleCloseModal }
    >
      {(clickMessage)
        ? ((writeMessage)
            ? (sendMessage)
                ? <PageThanks />
                : <ErrorMessage openThank={ openThank } />
            : (
              <ErrorChoice close={ handleCloseModal }
                openMessage={ openMessage }
              />
              ))

        : <ErrorBackend openChoice={ openChoice } />
            }

    </ModalBase>
  )
}

Answer 1

[Alexandroppolus]

Твой тернарник можно преобразовать в "линейный", где вложенность есть только после двоеточия. Такой вариант выглядит аккуратно.

condition1 ? value1 : condition2 ? value2 : condition3 ? value3 : ...