Rendering components dynamically

This section’s heading seems interesting, but haven’t we already seen how to render dynamic stuff in the UI? Well, what’s different here is that the component itself is not dynamic, but its rendering is.

Let’s take a real-world scenario that we usually see in many advanced and big apps (Azure Portal, for example), which have a dashboard that is customizable by the user. This app offers a huge collection of widgets (each widget is a component) and the user can create their own dashboard by choosing which widgets to place on the dashboard page.

There are many solutions for such a scenario. For example, we can store the selected widget names in an array and then iterate over the array in the dashboard page, then make an if statement based on the name of the widget, and render the corresponding component. Actually, this works, but if you think about it, the need for a customizable dashboard means a massive number of widgets...