Passing signal from one template's function to a different template function
I've been reading so much I think I've confused myself more. If I
createSignal() in header.jsx how can I use that value in footer.jsx
Any pointers would be appreciated.8 Replies
it's funny
I've recently refactored a header component that was using too much globally shared state
https://github.com/solidjs-community/solid-primitives/pull/346/files#diff-05eb760e763986b60ca6424864323f8be75302fea9ad671f26b5fa9612db531e
I think that the best approach to start from when thinking about problems like this is using context/prop-drilling and pushing the state as high in the tree as possible.
If your app looks like this
Adding that signal to <App> instead and sharing it with both <Header> and <Footer> is great
If that's not an option, then you have to be creative 😄
e.g. you could have a global signal in the header that you export and import in the footer.
But global signals can be dangerous in SSR as they can lead to state leaking between requests
in the linked pr you can see
isScrollEnabled being a global, shared signal.
It works for now, but I will probably look for a way to have it higher in the component tree and shared through context instead.I was just in the process of moving the
createSignal to the App (in the above example) and passing down to the <Header> and <Footer>. My issue now is there's a button in <Header> that wants to change the signal. Not sure how to get that change back up to <App>'s setter.props.onChange(new_state) 🤷♂️
state flows downwards and events upwardsSo, do I only need to pass the is?
<Header cheeseburger={isHamburger()} />not sure if I get that
you pass the current state and an event-listener to listen for change as props
so yeah, it could be like this
<Header cheeseburger={isHamburger()} onChange={setIsHamburger} />Oh, ok. So in
Header
that would then bubble up to <App> and effectively call setIsHamburger() giving it the new value of true
I'm successfully passing the value down to the child components. Just fumbling with the onChange.
<Header cheeseburger={isHamburger()} onChange={setIsHamburger} />
then in <Header> a button has:
onClick={() => {setIsHamburger = !props.cheesburger}}
but that's not working.setIsHamburger is a function - the signal setter
you can it not assign to it
also props.cheeseburger = true is not the syntax - props are readonly, there is no two way binding
you update state by calling a function
That was the key. Thank you!
<Header cheeseburger={isHamburger()} setIsHamburger={setIsHamburger} />
then down in Header
onClick={() => {props.setIsHamburger(!props.cheeseburger)}}