createMutable and reactivity in component attributes

[jvanveen]

Hi,

I'm not sure what I'm doing wrong here, but I would like to use a POJO for state management using createMutable. In this example, I would like to update the Icon name attribute dynamically, and re-render whenever the property changes; e.g.

const state = createMutable({
    className: {
        collapsed: true,
    },
})

<Icon
    name={state.className.collapsed ? 'eye' : 'eye_off'}
    onClick={() => {
        state.className.collapsed = !state.className.collapsed;
    }}
    size="s"
/>

<!-- Icon component -->
import {classes} from '../../../lib/utils'

const svg = {
    eye: 'M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C21.27,16.39 17,19.5 12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C15.76,17.5 19.17,15.36 20.82,12C19.17,8.64 15.76,6.5 12,6.5C8.24,6.5 4.83,8.64 3.18,12Z',
    eye_off: 'M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z',
}

export function Icon({ name, onClick, size}) {
    return <svg class={classes('c-icon', `icon-${size ? size : 'd'}`)}
        height="40"
        onClick={onClick}
        viewBox="0 0 24 24"
        width="40"
    >
        <path d={svg[name]} />
    </svg>
}

However, the name attribute doesn't get updated inside the Icon component. What am I doing wrong here?

[jvanveen]

Phind suggests:

The icon name is not updating because it is being set based on a ternary operator that checks the value of state.className.collapsed. When state.className.collapsed changes, the ternary operator will re-evaluate and set the icon name to either 'eye' or 'eye_off' accordingly. However, the Icon component itself is not being re-rendered when this happens.
To fix this, you can wrap the Icon component in a createMemo to ensure it re-renders whenever state.className.collapsed changes.

<Icon
  name={createMemo(() => state.className.collapsed ? 'eye' : 'eye_off')}
  onClick={() => {
    state.className.collapsed = !state.className.collapsed;
  }}
  size="s"
/>

Doesn't really make sense to me yet...