S
SolidJS•4w ago
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>
)
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>
<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!
10 Replies
Madaxen86
Madaxen86•4w ago
What happens if you pass "span" as component to Dynamic?
Paul
PaulOP•4w ago
const Element = local.component || 'div';
const Element = local.component || 'div';
Really, it needs to be Element. I just wanted to see what would happen if Dynamic was replaced. Changing it to 'span' works. Well it works in the way that swapping out Dynamic for span worked. 😂 The component itself is broken completely.
Madaxen86
Madaxen86•4w ago
Try to put local.component || 'div' directly in the JSX
Paul
PaulOP•4w ago
you mean like: 
<>
   {local.component || 'div'}
</>
<>
   {local.component || 'div'}
</>
Madaxen86
Madaxen86•4w ago
No inside Dynamic’s component prop
Paul
PaulOP•4w ago
No difference.
Madaxen86
Madaxen86•4w ago
Can you reproduce this in the playground?
Paul
PaulOP•4w ago
Unfortunately not. It's a core component of this lib I'm working on. I'm like 99% there. 😅
Madaxen86
Madaxen86•4w ago
Just logically: if it works by using an HMTL element directly or pass just a string to the Dynamic component then there must be something wrong with local.component or the component that is passed in.
Paul
PaulOP•4w ago
Well, the component is completely broken. If I navigate to other components in the storybook. None of them work. It only works in the sense that the props are reactive. Got it working. Had to do some gymnastics 😩 Updating the "context". 
const elementProps = createMemo(() => {
    const baseProps = {
      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),
    };

    const merged = mergeProps(baseProps, rest());
    return merged;
  });
const elementProps = createMemo(() => {
    const baseProps = {
      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),
    };

    const merged = mergeProps(baseProps, rest());
    return merged;
  });
and the return 
{(() => {
        const p = elementProps();
        return typeof local.renderRoot === 'function'
          ? local.renderRoot(p)
          : <Dynamic component={Element} {...p}>{local.children}</Dynamic>;
      })()}
{(() => {
        const p = elementProps();
        return typeof local.renderRoot === 'function'
          ? local.renderRoot(p)
          : <Dynamic component={Element} {...p}>{local.children}</Dynamic>;
      })()}
Ok, better. 😮‍💨

Did you find this page helpful?