Solid.js: Dynamic の使い方 (TypeScript)

次のページを参考にしました。
制御フロー/Dynamic

プロジェクトの作成

npx degit solidjs/templates/ts dynamic01
cd dynamic01
npm i
npm run dev

src/App.tsx を改造

src/App.tsx

import type { Component } from 'solid-js';
import { render } from 'solid-js/web';
import { createSignal, Switch, Match, For } from "solid-js";

const RedThing = () => <strong style="color: red">Red Thing</strong>;
const GreenThing = () => <strong style="color: green">Green Thing</strong>;
const BlueThing = () => <strong style="color: blue">Blue Thing</strong>;
const YellowThing = () => <strong style="color: yellow">Yellow Thing</strong>;
const CyanThing = () => <strong style="color: cyan">Cyan Thing</strong>;

const options = {
  red: RedThing,
  green: GreenThing,
  blue: BlueThing,
  yellow: YellowThing,
  cyan: CyanThing
}
const App: Component = () => {
const [selected, setSelected] = createSignal("red");
  return (
    <>
      <div>Select Colors</div>
	<blockquote>
      <div>Jun/24/2022</div>
	</blockquote>
<select value={selected()} onInput={e => setSelected(e.currentTarget.value)}>
        <For each={Object.keys(options)}>{
          color => <option value={color}>{color}</option>
        }</For>
      </select>
      &nbsp;&nbsp;&nbsp;
<Dynamic component={options[selected()]} />
    </>
  )

}

export default App

ブラウザーで http://localhost:3000/ にアクセス