Реагировать на рендеринг _html и другого элемента в разном порядке?

Question

Я хочу отобразить внутренний html и список в разном порядке. Я мог бы, вероятно, сохранить жесткое кодирование внутри __htmlсписок, но я хочу использовать опору списка для чтения ... Если я сделаю это таким образом, список всегда будет вторым, верно? Но я хочу, чтобы позиция в файле данных определяла, где он отображается (сначала список или сначала текст)

сначала внутренний HTML, затем отображается список

      {
    slideIndex: 1,
    title: "Course Flow",
    text: [
        {
            __html: "At the end of this course,...",
            list: {
                title: "The course flow and lessons...",
                items: [
                    "Introduction",
                    "Overview ",
                    "Human Resource Personnel ",
                ],
            },
        },
    ],

    image: {
        src: courseflow,
        width: imageSize,
    },
},

или, допустим, однажды я МЕНЯЮ ПОРЯДОК текста?

      {
    slideIndex: 1,
    title: "Course Flow",
    text: [
        {
            list: {
                title: "The course flow and lessons...",
                items: [
                    "Introduction",
                    "Overview ",
                    "Human Resource Personnel ",
                ],
            },
            __html: "At the end of this course,...",
        },
    ],

    image: {
        src: courseflow,
        width: imageSize,
    },
},

Раздел рендеринга:

      <div className="content">
  {text.map((t, i) => (
    <p key={i} className="text" dangerouslySetInnerHTML={t} />
  ))}
  {list && (
    <div className="list">
      <h4>{list.title}</h4>
      <br />
      <ul>
        {list.items.map((item, i) => (
          <li key={i}>{item}</li>
        ))}
      </ul>
    </div>
  )}
</div>;

ИЗМЕНИТЬ ПОСЛЕ ПРЕДЛОЖЕНИЯ (изменить массив)

      {
    slideIndex: 5,
    title: "Course Flow",
    text: [
      {
        __html:
          "At the end of this course, you are required to receive a minimum passing score of 80% on the post-assessment in order to successfully complete this course.<br></br>",
      },
      {
        type: "The course flow and lessons contained within this lesson are as follows:",
        items: [
          "Introduction",
          "Overview of GFEBS HR & Payroll and Labor Process",
          "Human Resource Personnel Administration (HRPA)",
          "Create and Maintain Employee Records",
          "High-Level Payroll PRocess Flow",
          "Reports",
        ],
      },
    ],

Я хочу, чтобы список отображался вверху (в зависимости от позиции в файле данных).