update

devour_data/docs/dynamic.json

@@ -0,0 +1,17 @@
+{
+  "id": "a29ea0c92a634eb4eb179a01",
+  "source": "solid:signals",
+  "type": "github-document",
+  "title": "dynamic",
+  "content": "---\ntitle: Dynamic\norder: 2\nuse_cases: \u003e-\n  dynamic component selection, polymorphic components, runtime component\n  switching, flexible ui rendering, component factories\ntags:\n  - dynamic\n  - components\n  - rendering\n  - polymorphic\n  - runtime\n  - flexible\nversion: '1.0'\ndescription: \u003e-\n  Render components dynamically at runtime with Solid's Dynamic component. Build\n  flexible UIs with runtime component selection.\n---\n\n`\u003cDynamic\u003e` is a Solid component that allows you to render components dynamically based on data.\nBy passing either a string representing a [native HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) or a component function to the `component` prop, you can render the chosen component with the remaining props you provide.\n\n```jsx\nimport { createSignal, For } from \"solid-js\"\nimport { Dynamic } from \"solid-js/web\"\n\nconst RedDiv = () =\u003e \u003cdiv style=\"color: red\"\u003eRed\u003c/div\u003e\nconst GreenDiv = () =\u003e \u003cdiv style=\"color: green\"\u003eGreen\u003c/div\u003e\nconst BlueDiv = () =\u003e \u003cdiv style=\"color: blue\"\u003eBlue\u003c/div\u003e\n\nconst options = {\n\tred: RedDiv,\n\tgreen: GreenDiv,\n\tblue: BlueDiv,\n}\n\nfunction App() {\n\tconst [selected, setSelected] = createSignal(\"red\")\n\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cselect\n\t\t\t\tvalue={selected()}\n\t\t\t\tonInput={(e) =\u003e setSelected(e.currentTarget.value)}\n\t\t\t\u003e\n\t\t\t\t\u003cFor each={Object.keys(options)}\u003e\n\t\t\t\t\t{(color) =\u003e \u003coption value={color}\u003e{color}\u003c/option\u003e}\n\t\t\t\t\u003c/For\u003e\n\t\t\t\u003c/select\u003e\n\t\t\t\u003cDynamic component={options[selected()]} /\u003e\n\t\t\u003c/\u003e\n\t)\n}\n```\n\nThis example renders a `\u003cselect\u003e` element that allows you to choose between three colors.\nOnce a color is selected, the `\u003cDynamic\u003e` component will render the chosen color's corresponding component or element.\n\n`\u003cDynamic\u003e` creates more concise code than alternative conditional rendering options.\nFor example, the following code renders the same result as the previous example:\n\n```jsx\nimport { createSignal, Switch, Match, For } from \"solid-js\"\n\nconst RedDiv = () =\u003e \u003cdiv style=\"color: red\"\u003eRed\u003c/div\u003e\nconst GreenDiv = () =\u003e \u003cdiv style=\"color: green\"\u003eGreen\u003c/div\u003e\nconst BlueDiv = () =\u003e \u003cdiv style=\"color: blue\"\u003eBlue\u003c/div\u003e\n\nconst options = {\n\tred: RedDiv,\n\tgreen: GreenDiv,\n\tblue: BlueDiv,\n}\n\nfunction App() {\n\tconst [selected, setSelected] = createSignal(\"red\")\n\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cselect\n\t\t\t\tvalue={selected()}\n\t\t\t\tonInput={(e) =\u003e setSelected(e.currentTarget.value)}\n\t\t\t\u003e\n\t\t\t\t\u003cFor each={Object.keys(options)}\u003e\n\t\t\t\t\t{(color) =\u003e \u003coption value={color}\u003e{color}\u003c/option\u003e}\n\t\t\t\t\u003c/For\u003e\n\t\t\t\u003c/select\u003e\n\t\t\t\u003cSwitch fallback={\u003cBlueDiv /\u003e}\u003e\n\t\t\t\t\u003cMatch when={selected() === \"red\"}\u003e\n\t\t\t\t\t\u003cRedDiv /\u003e\n\t\t\t\t\u003c/Match\u003e\n\t\t\t\t\u003cMatch when={selected() === \"green\"}\u003e\n\t\t\t\t\t\u003cGreenDiv /\u003e\n\t\t\t\t\u003c/Match\u003e\n\t\t\t\u003c/Switch\u003e\n\t\t\u003c/\u003e\n\t)\n}\n```\n\nInstead of a more verbose [`\u003cSwitch\u003e` and `\u003cMatch\u003e`](/concepts/control-flow/conditional-rendering) statement, `\u003cDynamic\u003e` offers a more concise way to render components dynamically.\n\n## Props\n\nWhen working with these components, you can pass [props](/concepts/components/props) to the component you are rendering by passing them to the `\u003cDynamic\u003e` component.\nThis makes them available to the component you are rendering, similar to how you would pass props to components in JSX.\n\n```jsx\nimport { Dynamic } from \"solid-js/web\"\n\nfunction App() {\n\treturn (\n\t\t\u003cDynamic component={someComponent} someProp=\"someValue\" /\u003e\n\t)\n}\n```",
+  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/control-flow/dynamic.mdx",
+  "metadata": {
+    "path": "src/routes/concepts/control-flow/dynamic.mdx",
+    "repo": "solidjs/solid-docs",
+    "repo_url": "https://github.com/solidjs/solid-docs.git",
+    "size": 3290,
+    "source_type": "github"
+  },
+  "hash": "a2aada65d37568dca4dd587cf086808a38fe23e9a6f62150bc2ab8a2b93a211b",
+  "timestamp": "2026-02-23T11:43:00.186556942+01:00"
+}