S
SolidJS•2w ago
luis

SolidStart(?) useContext problem

Trying to use useContext in solidstart, but it seems that it server renders my provider and doesn't change in client, not sure what i'm doing wrong. ThemeProvider is in the root of app.tsx, trying to use ThemeSelector in routes/index.tsx 
export const ThemeProvider: ParentComponent = ({ children }) => {
    const [currentTheme, setCurrentTheme] = createSignal(defaultThemeKey as ThemeKey);
    const themeContext = 
        {
            themeKey: currentTheme,
            theme: createMemo(() => themes[currentTheme()]),
            setTheme: setCurrentTheme,
        };
    return (
        <ThemeContext.Provider value={themeContext}>
            {children}
        </ThemeContext.Provider>
    );
};

export const useTheme = () => {
    const context = useContext(ThemeContext);
    return context;
};

export const ThemeSelector = () => {
    const theme = useTheme();
    if (!theme) {
        console.warn("THEME-SELECTOR: useTheme returned undefined");
        return null;
    }
    return (
        <select onChange={(e) => theme.setTheme(e.target.value as ThemeKey)}>
            {Object.keys(themes).map((k) => (
                <option value={k} selected={theme.themeKey() === k}>{k}</option>
            ))}
        </select>
    );
}
export const ThemeProvider: ParentComponent = ({ children }) => {
    const [currentTheme, setCurrentTheme] = createSignal(defaultThemeKey as ThemeKey);
    const themeContext = 
        {
            themeKey: currentTheme,
            theme: createMemo(() => themes[currentTheme()]),
            setTheme: setCurrentTheme,
        };
    return (
        <ThemeContext.Provider value={themeContext}>
            {children}
        </ThemeContext.Provider>
    );
};

export const useTheme = () => {
    const context = useContext(ThemeContext);
    return context;
};

export const ThemeSelector = () => {
    const theme = useTheme();
    if (!theme) {
        console.warn("THEME-SELECTOR: useTheme returned undefined");
        return null;
    }
    return (
        <select onChange={(e) => theme.setTheme(e.target.value as ThemeKey)}>
            {Object.keys(themes).map((k) => (
                <option value={k} selected={theme.themeKey() === k}>{k}</option>
            ))}
        </select>
    );
}
it warns me the same thing both in terminal and browser console: THEME-SELECTOR: useTheme returned undefined
4 Replies
REEEEE
REEEEE•2w ago
You're destructuring props in the ThemeProvider
luis
luisOP•2w ago
so, no destructuring in props? it loses reactivity?
REEEEE
REEEEE•2w ago
Yes
luis
luisOP•2w ago
Thanks, it worked now!

Did you find this page helpful?