SolidJSS
SolidJS3y ago
35 replies
Mirardes

Dynamic Component is not working

Hi, I try to use Dynamic component without success.

I have try to replicate the issue in playground and the bug is still present :

Playground : https://playground.solidjs.com/anonymous/83f1450a-6060-4ae1-8361-b6436402949b

import { Dynamic, render } from "solid-js/web";
import {  createEffect, createSignal } from "solid-js";

export const StepperLayout = (props) => {
  console.log('QWEQWEQWEQE');

  return <>STEP LAYOUT {props?.children}</>;
};

export const AppLayout = (props) => {
  return <>APP LAYOUT {props?.children}</>;
};


const LayoutHome = (props: { children; currentStep?: string }) => {
  const [layout, setLayout] = createSignal(AppLayout);

  createEffect(() => {
    if (props.currentStep?.startsWith('STEP')) {
      setLayout(StepperLayout);
    }
  });

  createEffect(() => {
    console.log(layout(), AppLayout);
  });

  return <Dynamic component={layout()}>{props.children}</Dynamic>;
};

function Counter() {
  const [count, setCount] = createSignal(1);
  const increment = () => setCount(count() + 1);

  return (
    <button type="button" onClick={increment}>
      {count()}
    </button>
  );
}

render(() => <><LayoutHome currentStep="STEP">toto</LayoutHome></>, document.getElementById("app")!);
Quickly discover what the solid compiler will generate from your JSX template
Was this page helpful?