DynamicEdit 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.
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:
Instead of a more verbose
<Dynamic> offers a more concise way to render components dynamically.
When working with these components, you can pass props to the component you are rendering by passing them to the
This makes them available to the component you are rendering, similar to how you would pass props to components in JSX.