Dynamic component not known until runtime

[PHinett2]

I am new to the whole SolidJS/React type apps, so forgive me if this is obvious.

I want to load a component at runtime depending on a users selection, a simplified example would be a dropdown menu containing a payment method.

User selects PayPal, and then it tries to load a component called PayPal and displays it to the user. The list of payment options is dynamic, and there may/may not be a component available, if not then nothing is displayed.

I have seen the component to use, but the only examples i have seen is where the components to pass to it are known at compile time.

Is this type of thing possible?

[Thamane]

Hello,

For the dynamic part you could use the dynamic component :

https://www.solidjs.com/tutorial/flow_dynamic
https://www.solidjs.com/docs/latest/api#dynamic

For the maybe not available part I'm not so sure what you want. You could have all the component be known at build time ( paypal, mastercards ... ) and require your backend server to for the list of currently available component I guess ?

In this example availableOptions would be the response of a service that tell you what method are availables
https://playground.solidjs.com/anonymous/f0b42ce7-c171-4b37-a6be-f165388493fa

[PHinett2]

The part im missing is trying to not know all my components at build time.

I want to do something along the lines of (pseudo code):

selectionChanged(selectedComponentName) {
   var loadedComponent = loadComponent('./components/${selectedComponentName}');
   
   setMyComponent(loadedComponent); // which will set <Dynamic comonent={myComponent} />
}