Rendering dynamic components

Hi Solid community, I could really use your help:

Here’s the situation:

function Button(props) {
  return (() => {
    var _el$ = _tmpl$();
    addEventListener(_el$, "click", props.onclick);
    insert(_el$, () => props.value, null);
    insert(_el$, () => props.children, null);
    createRenderEffect(() => className(_el$, button(props.variant)));
    return _el$;
  })();
}
delegateEvents(["click"]);
export {
  Button as default
};

function Button(props) {
  return (() => {
    var _el$ = _tmpl$();
    addEventListener(_el$, "click", props.onclick);
    insert(_el$, () => props.value, null);
    insert(_el$, () => props.children, null);
    createRenderEffect(() => className(_el$, button(props.variant)));
    return _el$;
  })();
}
delegateEvents(["click"]);
export {
  Button as default
};

I’d like to dynamically create these buttons (just an example

) and nest them into each other at runtime as needed.

So I thought I’d store a list of these components in a signal and simply render the children in code like this:

const children = signal([]);
const templates: SolidTemplate[] = [];

function renderChildren(template: SolidTemplate) {
  templates.push(template);
  children[1](templates);
}

function init() {
  const [getChildren] = children;
  const c = solidjs.createComponent(() => getChildren());
  solidjs.render(() => c, document.getElementById("app"));
}

const children = signal([]);
const templates: SolidTemplate[] = [];

function renderChildren(template: SolidTemplate) {
  templates.push(template);
  children[1](templates);
}

function init() {
  const [getChildren] = children;
  const c = solidjs.createComponent(() => getChildren());
  solidjs.render(() => c, document.getElementById("app"));
}

Unfortunately, it doesn’t work — nothing gets rendered, and I’m not sure why. Thanks

Rendering dynamic components

Hi Solid community, I could really use your help:

Here’s the situation:

function Button(props) {
  return (() => {
    var _el$ = _tmpl$();
    addEventListener(_el$, "click", props.onclick);
    insert(_el$, () => props.value, null);
    insert(_el$, () => props.children, null);
    createRenderEffect(() => className(_el$, button(props.variant)));
    return _el$;
  })();
}
delegateEvents(["click"]);
export {
  Button as default
};

function Button(props) {
  return (() => {
    var _el$ = _tmpl$();
    addEventListener(_el$, "click", props.onclick);
    insert(_el$, () => props.value, null);
    insert(_el$, () => props.children, null);
    createRenderEffect(() => className(_el$, button(props.variant)));
    return _el$;
  })();
}
delegateEvents(["click"]);
export {
  Button as default
};

I’d like to dynamically create these buttons (just an example

) and nest them into each other at runtime as needed.

So I thought I’d store a list of these components in a signal and simply render the children in code like this:

const children = signal([]);
const templates: SolidTemplate[] = [];

function renderChildren(template: SolidTemplate) {
  templates.push(template);
  children[1](templates);
}

function init() {
  const [getChildren] = children;
  const c = solidjs.createComponent(() => getChildren());
  solidjs.render(() => c, document.getElementById("app"));
}

const children = signal([]);
const templates: SolidTemplate[] = [];

function renderChildren(template: SolidTemplate) {
  templates.push(template);
  children[1](templates);
}

function init() {
  const [getChildren] = children;
  const c = solidjs.createComponent(() => getChildren());
  solidjs.render(() => c, document.getElementById("app"));
}

Unfortunately, it doesn’t work — nothing gets rendered, and I’m not sure why. Thanks

Rendering dynamic components

Similar Threads

Rendering dynamic components

Similar Threads

Similar Threads

Similar Threads