Control Flow

Dynamic

Edit this page

<Dynamic> is a Solid component that allows you to render components dynamically based on data. By passing either a string representing a native HTML element or a component function to the component prop, you can render the chosen component with the remaining props you provide.

import { createSignal, Dynamic, For } from "solid-js"
const RedDiv = () => <div style="color: red">Red</div>
const GreenDiv = () => <div style="color: green">Green</div>
const BlueDiv = () => <div style="color: blue">Blue</div>
const options = {
red: RedDiv,
green: GreenDiv,
blue: BlueDiv,
}
function App() {
const [selected, setSelected] = createSignal("red")
return (
<>
<select
value={selected()}
onInput={(e) => setSelected(e.currentTarget.value)}
>
<For each={Object.keys(options)}>
{(color) => <option value={color}>{color}</option>}
</For>
</select>
<Dynamic component={options[selected()]} />
</>
)
}

This example renders a <select> element that allows you to choose between three colors. Once a color is selected, the <Dynamic> component will render the chosen color's corresponding component or element.

<Dynamic> creates more concise code than alternative conditional rendering options. For example, the following code renders the same result as the previous example:

import { createSignal, Switch, Match, For } from "solid-js"
const RedDiv = () => <div style="color: red">Red</div>
const GreenDiv = () => <div style="color: green">Green</div>
const BlueDiv = () => <div style="color: blue">Blue</div>
const options = {
red: RedDiv,
green: GreenDiv,
blue: BlueDiv,
}
function App() {
const [selected, setSelected] = createSignal("red")
return (
<>
<select
value={selected()}
onInput={(e) => setSelected(e.currentTarget.value)}
>
<For each={Object.keys(options)}>
{(color) => <option value={color}>{color}</option>}
</For>
</select>
<Switch fallback={<BlueDiv />}>
<Match when={selected() === "red"}>
<RedDiv />
</Match>
<Match when={selected() === "green"}>
<GreenDiv />
</Match>
</Switch>
</>
)
}

Instead of a more verbose <Switch> and <Match> statement, <Dynamic> offers a more concise way to render components dynamically.


Props

When working with these components, you can pass props to the component you are rendering by passing them to the <Dynamic> component. This makes them available to the component you are rendering, similar to how you would pass props to components in JSX.

import { Dynamic } from "solid-js"
function App() {
return (
<Dynamic component={someComponent} someProp="someValue" />
)
}
Report an issue with this page