SolidJSS
SolidJS•9mo ago•
13 replies
Paul

Not understanding signals

I have this component:

const [opened, setOpened] = createSignal(false);

  createEffect(() => {
    console.log('parent opened: ', opened());
  });

  return (<>
    <div style={{ 'padding': '40px' }}>
      <Burger opened={opened()} onClick={() => setOpened((o) => !o)} size={400} lineSize={1} />
    </div>
  </>)


See parent opened being reactive just fine. 😄 

export const Burger = factory<BurgerFactory>((_props, ref) => {
const props = useProps('Burger', defaultProps, _props);
  const [local, others] = splitProps(props, [
    ...
    'opened',
    ...
  ]);

If I put a createEffect here.  I don't see anything at all.

createEffect(() => {
  console.log('opened', local.opened()); <-- have tried many combinations here
});

return (
    ...
      <Box mod={['reduce-motion', { opened: () => local.opened! }]} {...getStyles('burger')} />
      {local.children}
    ...
  );
});


Note for opened: () => local.opened!

opened: local.opened
opened: local.opened()
opened: () => local.opened
opened: () => local.opened!


Whatever I try. I just don't get any feedback.

What am I missing? The docs are a little too basic. I understand signals when all the code is centred within 1 component. Now a nested setup. I am lost.

Thanks! And please ELI5 it for me 😂
Was this page helpful?