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

Вопрос-ответ JavaScript
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>
}