Sometimes you will want to dynamically return a component based on a prop, your current state, or some other data. This can be challenging when working with JSX because simply running the following will not work.

const FooComponent = () => {};
const BarComponent = () => {};

const types = [FooComponent, BarComponent];

return <types[0] />;

Instead of creating a map of all possible components this can be achieved by assigning the desired component function to a constant that starts with a capital later, like a normal Activity class name. It can then be used as valid JSX and React will take care of the rest when compiled down to vanilla JavaScript.

const FooComponent = () => {};
const BarComponent = () => {};

const types = [FooComponent, BarComponent];
const DynamicComponent = types[0];

return <DynamicComponent />; 
// => <FooComponent />