Как сделать динамический рендеринг?

Question

[gsdev99]

Есть компонент, который рендерит динамически компоненты по типу. Сейчас это происходит следующим образом: один под другим. Как в данном случае правильно сделать, если, мне нужно, чтобы компонент 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} />
  )
}

https://codepen.io/gsdev99/pen/bGdeWbw

Answer 1

[0xD34F]

Как в данном случае правильно сделать...

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

"Правильно" - никак. Непонятно, откуда должен будет взяться section.

Так что структуру данных изменить всё-таки придётся.

Answer 2

[Александр Епихин]

Если я правильно вас понял то вот так можно.