How to do dynamic rendering?

Question

React

There is a component that dynamically renders components by type. Now it happens like this: one under the other. What is the right thing to do in this case, if I need the Title component (all elements) in section.
To get something like this:

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

    <New />
</main>

The data structure cannot be changed.

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

What is the right way to do this...

The data structure cannot be changed.

"Correct" - no way. It is not clear where section should come from.
So the data structure will still have to be changed .

Answer 2

If I understand you correctly, then this is how you can do it.