I have a component that pops up at different points in the application.
In the popup component I have several child components grouped by their usage, these are already imported in, *statically*.

I then use a switch statement to render the different groups of components depending on a prop *usage* passed in.

This is working ok, but the switch statement (and imports) is growing.

Is their a way I could pass in the components at runtime and have them render. So that at any one time only one group of components is present/instanced in the popup ? Just trying to do away with the switch statement and the static imports 

*pseudo code*

```
<renderPopup children={[ componentA, componentB ]} />

<renderPopup children={[ componentA, componentB, componentC ]} />

```

Is this something that Webpack could do ? But would prefer it to be code rather than config ? 

The child components will have static imports etc.

Hope this makes sense.