Reading data across non-child components

[raffle-x-dev]

Is there a way to read a variable created inside a component, from another non-child component? I thought it could have been done with signals, but I might have misunderstood it.

[marvinhagemeister]

Yes, pass a signal to the components that should read or write to it and update it.

[raffle-x-dev]

Aw... That's exactly what I'd like to do. No idea how to pass a signal to siblings components. I guess it's my limit. I've seen workarounds to pass variables to parent components but they were dozens of lines of code just to kick out a variable. I got scared to implement that, was looking for something easier. 😅

[rschristian]

Signals are pretty neat as you can just import them.

// siblingOne.js
export const myCount = signal(0);

export function SiblingOne() { ... }

// siblingTwo.js
import { myCount as mySiblingCount } from './siblingOne.js'

export function SiblingTwo() { ... }

Of course, lifting state up into the parent is also a viable strategy. Parent can pass the signal to both children, allowing them to read/write the same shared instance.

const sharedCount = signal(0);

export function ParentComponent() {
    return (
        <>
            <ChildOne count={sharedCount} />
            <ChildTwo count={sharedCount} />
        </>
    );
}

[raffle-x-dev]

Thanks for taking time to answer this.
I guess my problem is that my signals are created inside the component logic, which uses props:

// siblingTwo.js

export function SiblingTwo(props) {
   
    ...some logic using props...

    const mySignal = signal(uses above logic)

    return(...)
}

So you can't just export mySignal from inside the component function.
I partially solved by writing the value I need to localStorage.
If anyone has a better alternative or signals can help differently, I'd be more than happy to learn! @marvinhagemeister ✌

[rschristian]

Sounds like a good candidate for being raised into the parent and passed into the children then.