This gist shows how to make your JSX cleaner using objects.

jsx-clean.tsx

function ZeroComponent() { 
  return <p>0</p>
}

function OneComponent() { 
  return <p>1</p>
}

function TwoComponent() { 
  return <p>2</p>
}

const COMPONENTS = {
  0: <ZeroComponent />,
  1: <OneComponent />,
  2: <TwoComponent />
}

export function MyComponent() {
  const [index, setIndex] = useState(0)

  return {
    <>
      {COMPONENTS[index]}

      <button onClick={() => setIndex((prev) => prev + 1)}>Next component</button>
    </>
  }
}