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

Вопрос-ответ JavaScript
1

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

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

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

    return 'component'
  })
}
2 
import ComponentOne from './component-one'
import ComponentTwo from './component-two'
import ComponentThree from './component-thee'

function renderWidgets(data) {
	return <React.Fragment>
		{data.map((widgetData) => {
			const widgetTypeName = widgetData.type
			switch (widgetTypeName) {
				case 'One':
					return <ComponentOne />
				break;
				case 'Two':
					return <ComponentTwo />
				break;
				case: 'Three':
					return <ComponentThree />
				break;
				default: // Возможно тут нужно сообщить об ошибке что передают данные об неизвестном виджете
					break;
			}
		})}
	</React.Fragment>
}

renderWidgets(data.widgets)
1 лайк
3

Спасибо.