Как сделать динамический рендеринг? [Как отредерить данные из массива в секции согласно типам]

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

Всем привет. Ребята, подскажите, пожалуйста, как решить следующую задачу. Есть у меня компонент, который рендерит динамически компоненты по типу. Сейчас это происходит следующим образом: один под другим. Как в данном случае правильно сделать, если, мне нужно, чтобы компонент Title (все элементы) в section.

Что бы получилось, что-то вроде этого:

<main>
    <section>
        <Title />
        <Title />
        <Title />
    </section>

    <New />
</main>

Структуру данных менять нельзя.

const Factory = ({ widget }) => {
  const widgetType = widget.type.toLowerCase()
  
  const Component = components[widgetType]
  
  if (widgetType === 'title') {
    // я так понимаю, вот здесь должна быть логика
  }
  
  return (
    <Component widget={widget} />
  )
}
2

Будет удобно сделать из начальной структуры вида

[
{type: 'a', ...}
{type: 'b', ...}
{type: 'a', ...}
]

Структуру вида

{
'a' : [{type: 'a', ...}, {type: 'a', ...}]
'b' : [{type: 'b', ...}]
}

и отрендерить последнюю. Для каждого ключа из этого объекта будет своя секция section.

Примерный код:

function getMapByName(componentsArr) {
	return componentsArr.reduce((res, componentData) => {
		const type = componentData.type
		if (!res[type]) {
			res[type] = []
		}
		res[type].push(componentData)
	}, {})
}

function Components(componentsData) {
	const map = getMapByName(componentsData)
	return <React.Fragment>
		Object.keys(map).map((componentType) => {
			const components = map[componentType]
			// key нужен для каждого элемента внутри массива: ограничение реакта
			return <section key={componentType}>
				{components.map((componentData, index) => {
					return <Factory component={componentData} key={index} />
				})}
			</section>
		})
	</React.Fragment>
}
3

Спасибо за помощь.