How to make a dynamic rendering?

There is a component that renders dynamically the components by type. Now this is how it works: one under the other. In this case the right to do if I need a component Title (all elements) in the section.
To get something like this:
<main>
<section>
 <Title />
 <Title />
 <Title />
</section>

 <New />
</main>

The data structure can not be changed.
const Factory = ({ widget }) => {
 const widgetType = widget.type.toLowerCase()

 const Component = components[widgetType]

 if (widgetType === 'title') {
 // I so understand, here should be the logic
}

 return (
 <Component widget={the widget} />
)
}

https://codepen.io/dino/pen/bGdeWbw
April 7th 20 at 15:41
2 answers
April 7th 20 at 15:43
Solution
In this case the right to do...

The data structure can not be changed

"That's right" - no way. It is not clear where must take section.

So the data structure to change still have.
April 7th 20 at 15:45
If I understand you correctly then so can you.

Find more questions by tags React