SolidJS•12mo ago

Brand new going through the tutorial. Unsure of the purpose of the <Dynamic> component.

I feel like I'm missing something obvious. The tutorial page for the <Dynamic> component introduces it as a more compact alternative to a bunch of <Show> or <Switch> components. The "Solution" to the code wants me to replace a <Switch> with <Dynamic component={options[selected()]} />. But why do I even need <Dynamic>? See the full code below.

import { render, Dynamic } from "solid-js/web";
import { createSignal, 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 options = {
  red: RedThing,
  green: GreenThing,
  blue: BlueThing
}

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>

      { /* The suggested solution */ }
      <Dynamic component={options[selected()]} />

      { /* But why not just use this? It seems to have the exact same output */ }
      { options[selected()] }
    </>
  );
}

render(() => <App />, document.getElementById("app"));

import { render, Dynamic } from "solid-js/web";
import { createSignal, 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 options = {
  red: RedThing,
  green: GreenThing,
  blue: BlueThing
}

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>

      { /* The suggested solution */ }
      <Dynamic component={options[selected()]} />

      { /* But why not just use this? It seems to have the exact same output */ }
      { options[selected()] }
    </>
  );
}

render(() => <App />, document.getElementById("app"));

Is it just a helper so it's easier to pass props? I come from React, so I would typically build a props object and spread it, i.e.

const ColoredThing = options[selected];
const propsForThing = { prop1: 42, prop2: 69 };
return // ...
  <ColoredThing {...propsForThing} /> // ...

const ColoredThing = options[selected];
const propsForThing = { prop1: 42, prop2: 69 };
return // ...
  <ColoredThing {...propsForThing} /> // ...

6 Replies

foolswisdom•12mo ago

Dynamic allows changing the component if selected changes. IIRC that's the only functional difference

trevorsg•12mo ago

Sure, but { options[selected()] } seems to also do that? Like, I don't notice any functional difference with and without using <Dynamic>

foolswisdom•12mo ago

True, but to pass props, you need jsx And for jsx, you can't update the component used without dynamic

trevorsg•12mo ago

So, the "react" method that I referenced at the end of my post - would that not work in Solid?

foolswisdom•12mo ago

It would, so long as you you're fine with ColoredThing remaining whatever it was when options[selected] got read You would be unable to update the component used if you were to use that method

trevorsg•12mo ago

Ah, ok. That makes sense then. I think the tutorial would be better motivated if there were some props you had to pass, and maybe it would be better not to frame it as simply being a more compact form of Show and Switch. Thanks for the help!

Gaming

Programming

Brand new going through the tutorial. Unsure of the purpose of the <Dynamic> component.