Render a component from component object

multistep-form.tsx

import React from "react";

type Steps = "component-a" | "component-b" | "component-c";

const ComponentA = () => {
  return <div>Component B</div>;
};

const ComponentB = () => {
  return <div>Component B</div>;
};

const ComponentC = () => {
  return <div>Component C</div>;
};

const STEPS: Record<Steps, React.FC> = {
  "component-a": ComponentA,
  "component-b": ComponentB,
  "component-c": ComponentC,
};
  
const Form = () => {
  const currentStep = "component-a"; // state might be from url search param
  const CurrentStep = STEPS[currentStep];
  return <CurrentStep />;
};