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

Question

[gsdev99]

Всем привет. Подскажите, пожалуйста, как решить следующую задачу. С 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>

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

Answer 1

[Алексей Уколов]

Просто использовать widgets.map() - массив же уже отсортирован и будет обработан по порядку.

Comments

[gsdev99]

С точки зрения синтаксиса, как мне верно написать?

import ComponentOne from './component-one'
import ComponentTwo from './component-two'
import ComponentThree from './component-thee'
{
  widgets.map((widget) => {
    console.log('widget', widget)

    return 'component'
  })
}

[Алексей Уколов]

Точный синтаксис не могу сейчас проверить, но что-то подобное:

import ComponentOne from './component-one'
import ComponentTwo from './component-two'

...

const components = {
  One: ComponentOne,
  Two: ComponentTwo,
};

...

widgets.map((widget) => {
    return <components[widget.type]/>
})

[gsdev99]

Алексей Уколов, Я что-то похожее и сделал. Спасибо за помощь.