SolidJSS
SolidJS•6mo ago•
15 replies
Paul

Properties not reactive with dynamic

I have this code (in brief).

const elementProps = createMemo(() => {
    return {
      ref: local.ref,
      style: getBoxStyle({
        theme,
        style: local.style,
        vars: local.__vars,
        styleProps: parsedStyleProps().inlineStyles,
      }),
      className: cx(local.className, transformedSx(), {
        [responsiveClassName]: parsedStyleProps().hasResponsiveStyles,
        'empoleon-light-hidden': local.lightHidden,
        'empoleon-dark-hidden': local.darkHidden,
        [`empoleon-hidden-from-${local.hiddenFrom}`]: local.hiddenFrom,
        [`empoleon-visible-from-${local.visibleFrom}`]: local.visibleFrom,
      }),
      'data-variant': local.variant,
      'data-size': isNumberLike(local.size) ? undefined : local.size || undefined,
      size: local.__size,
      ...getBoxMod(local.mod),
      ...rest,
    };
  });


return (
  <Dynamic component={Element} {...elementProps()}>
          {local.children}
        </Dynamic>
)


Upstream there is a disabled prop. It's not being reactive when used with Dynamic.

However, if I replace Dynamic with Span like:

<span {...elementProps()}>{local.children}</span>


Then the component that is using Box to be disabled/enabled. Now works.

Is there an alternative for Dynamic that I can use?

Thanks!
Was this page helpful?