javascript - 開いたタグと閉じていないタグを含むコンポーネントをレンダリングする方法は? React.js

Question

次のようなネストされた ul タグを持つカードをレンダリングするコンポーネントを作成するという目的があります。この ようなデータから、親コンポーネントからの小道具と共に渡されます。

そのために、ネストされた ul が始まる行の末尾にマーカーを設定します。たとえば、ネストされた ul を開く必要がある場合は「:」、「。ネストされた ul を閉じる必要があるとき。しかし、このコードを機能させるには、開いたタグをレンダリングする必要がありますが、閉じたタグはレンダリングしません。

let inUl = false;
<div className="cardBody">
        {props.body.map((el, index) => {
          if(el.endsWith(":")){
            inUl = true;
            return <li>{el}<ul>
          } else if(inUl && el.endsWith('.')){
            inUl = false;
            return <li>{el}</li></ul>
          } else {
            return <li>{el}</li>
          }
        })}
  </div>

私は締め切りが迫っており、現在、私は文字通りプロジェクトの最後の部分で立ち往生しています - これ。