SolidJSS
SolidJS•12mo ago•
5 replies
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>
    );
}

it warns me the same thing both in terminal and browser console:
THEME-SELECTOR: useTheme returned undefined
Was this page helpful?