Как правильно работать с порядком вывода в React?
 

Всем привет. Подскажите, пожалуйста, как решить следующую задачу. С backend приходит массив с данных с типом виджетов, например:

{
  "widgets": [
    {
      "type": "One",
      "data": {
        "title": "title1",
        "subTitle": "subTitle1",
        "thirdText": "thirdText1"
      }
    },
    {
      "type": "Three",
      "data": {
        "title": "title3",
        "subTitle": "subTitle3",
        "thirdText": "thirdText3"
      }
    },
    {
      "type": "Two",
      "data": {
        "title": "title2",
        "subTitle": "subTitle2",
        "thirdText": "thirdText2"
      }
    }
  ]
}

Моя задача состоит в следующем: выводить виджеты в том порядке, в котором они пришли с backend. Т.е. в данном случае, вывод будет такой:

<React.Fragment>
  <ComponentOne />
  <ComponentThree />
  <ComponentTwo />
</React.Fragment>

Если данные не пришли на One, то вывод будет:

<React.Fragment>
  <ComponentThree />
  <ComponentTwo />
</React.Fragment>

Подскажите, пожалуйста, как правильно решить эту задачу сделать?

Даю ответ самому себе:
https://reactjs.org/docs/jsx-in-dept...ype-at-runtime