luis Posts - Answer Overflow

luis

•Created by luis on 2/14/2025 in #support

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

6 replies

SSolidJS

•Created by luis on 8/2/2024 in #support

Showing error on ssr static builds, but don't know what it is

2 replies

Gaming

Programming