Dynamic components

When the component to render is chosen at runtime, dynamic from @solidjs/web turns a function that returns a component into a component you can render:

const View = dynamic(() => views[view()]);

<For each={products}>{(product) => <View product={product} />}</For>;

When view() changes, every View swaps to the new component and receives the same props. Create it once in the component body, not inside JSX, so it isn't recreated on each render.

A Switch with one Match per option would also work, but it repeats the props once per case. dynamic keeps one call site however many options there are.

Try it: the layout select does nothing; every product renders as a Card. Use dynamic to render whichever view the select picks.