useState is not working

can anyone tell me why in given below code is not working properly
const [localStorageTheme, setLocalStorageTheme] = useState(() => {
const lTheme = localStorage.getItem("localStorageTheme");
if (lTheme) {
return lTheme;
}
const isLight = window.matchMedia("(prefers-color-scheme: light)").matches;
console.log(isLight);
return isLight ? "light" : "dark";
});
const [localStorageTheme, setLocalStorageTheme] = useState(() => {
const lTheme = localStorage.getItem("localStorageTheme");
if (lTheme) {
return lTheme;
}
const isLight = window.matchMedia("(prefers-color-scheme: light)").matches;
console.log(isLight);
return isLight ? "light" : "dark";
});
let it return us "dark" but now i am trying to change dom by this value it is not working
{
<div
style={{
transitionTimingFunction: "steps(10)",
}}
className={`leading-none w-[660px] h-[100%] block overflow-hidden transition-transform ${
localStorageTheme === "dark" ? "translate-x-[-93%] " : "translate-x-0"
} duration-100`}
>
//code
</div>
}
{
<div
style={{
transitionTimingFunction: "steps(10)",
}}
className={`leading-none w-[660px] h-[100%] block overflow-hidden transition-transform ${
localStorageTheme === "dark" ? "translate-x-[-93%] " : "translate-x-0"
} duration-100`}
>
//code
</div>
}
in dom it is putting value of "translate-x-0" it should be "translate-x-[-93]"
28 Replies
pradeep
pradeep2y ago
whole component
"use client";
import Image from "next/image";
import modeImg from "@/public/mode.png";
import { useTheme } from "next-themes";
import { debounce, throttling } from "@/lib/utils";
import { useCallback, useEffect, useRef, useState } from "react";
import clsx from "clsx";
export default function Mode({ className }: { className?: string }) {
const [localStorageTheme, setLocalStorageTheme] = useState(() => {
const lTheme = localStorage.getItem("localStorageTheme");
if (lTheme) {
return lTheme;
}
const isLight = window.matchMedia("(prefers-color-scheme: light)").matches;
console.log("theme", isLight);
return isLight ? "light" : "dark";
});
console.log(localStorageTheme);
const { setTheme, theme } = useTheme();
const Click = useCallback(
debounce(() => {
setTheme(localStorageTheme === "light" ? "dark" : "light");
}, 400),
[theme, setTheme]
);

useEffect(() => {
setLocalStorageTheme(theme as string);
}, [theme, setTheme]);

return (
<div
onClick={Click}
className={clsx(" w-[60px] overflow-hidden", className)}
>
<div
style={{
transitionTimingFunction: "steps(10)",
}}
className={`leading-none w-[660px] h-[100%] block overflow-hidden transition-transform ${
localStorageTheme === "dark" ? "translate-x-[-93%] " : "translate-x-0"
} duration-100`}
>
<Image
className={"leading-[0] block "}
alt="mode image"
src={modeImg}
width={660}
/>
</div>
</div>
);
}
"use client";
import Image from "next/image";
import modeImg from "@/public/mode.png";
import { useTheme } from "next-themes";
import { debounce, throttling } from "@/lib/utils";
import { useCallback, useEffect, useRef, useState } from "react";
import clsx from "clsx";
export default function Mode({ className }: { className?: string }) {
const [localStorageTheme, setLocalStorageTheme] = useState(() => {
const lTheme = localStorage.getItem("localStorageTheme");
if (lTheme) {
return lTheme;
}
const isLight = window.matchMedia("(prefers-color-scheme: light)").matches;
console.log("theme", isLight);
return isLight ? "light" : "dark";
});
console.log(localStorageTheme);
const { setTheme, theme } = useTheme();
const Click = useCallback(
debounce(() => {
setTheme(localStorageTheme === "light" ? "dark" : "light");
}, 400),
[theme, setTheme]
);

useEffect(() => {
setLocalStorageTheme(theme as string);
}, [theme, setTheme]);

return (
<div
onClick={Click}
className={clsx(" w-[60px] overflow-hidden", className)}
>
<div
style={{
transitionTimingFunction: "steps(10)",
}}
className={`leading-none w-[660px] h-[100%] block overflow-hidden transition-transform ${
localStorageTheme === "dark" ? "translate-x-[-93%] " : "translate-x-0"
} duration-100`}
>
<Image
className={"leading-[0] block "}
alt="mode image"
src={modeImg}
width={660}
/>
</div>
</div>
);
}
Josh
Josh2y ago
Your setting localstoragetheme to a function
pradeep
pradeep2y ago
what that mean? useState(()=>"hello") it will put usestate value to "hello" right?
Josh
Josh2y ago
Iirc, no But test it and see It might
pradeep
pradeep2y ago
it does i know it
barry
barry2y ago
You have to use clsx or cn, to have conditional styles.
Josh
Josh2y ago
Ahh, so it does
pradeep
pradeep2y ago
oh why? can't we do it will template string?
barry
barry2y ago
Because that's how it works
Josh
Josh2y ago
No You don't
barry
barry2y ago
Yes you do
Josh
Josh2y ago
You're talking about the inline shorthand if in the string interp? That will work perfectly fine
pradeep
pradeep2y ago
yeah so where is problem?
barry
barry2y ago
${localStorageTheme === "dark" ? "translate-x-[-93%] " : "translate-x-0"} This does not work with tailwind.
Josh
Josh2y ago
It does because I do it in my projects lol
pradeep
pradeep2y ago
yeah same
Josh
Josh2y ago
Also, to do negative translations with tailwind, use -translate-x-[93%]
pradeep
pradeep2y ago
but that is not problem it is giving me translate-x-0
Sybatron
Sybatron2y ago
isnt the problem in this you set default value and then immediately remove that default value with theme
Josh
Josh2y ago
Ahh
pradeep
pradeep2y ago
yeah but for second it is showing change state i don't want that i am okay with light to light state change
Josh
Josh2y ago
Yeah yeah, good catch
pradeep
pradeep2y ago
i think i found out what is wrong with it localstorage value is system yeah this is problem ig i should check if theme value is system then check what is real value thank you your time guys i really appreciate it
pradeep
pradeep2y ago
btw josh you can see this if you already don't know about this https://tailwindcss.com/docs/content-configuration#class-detection-in-depth
Content Configuration - Tailwind CSS
Configuring the content sources for your project.
Josh
Josh2y ago
Generally, you shouldn't need to use useEffect. Its really only intended to sync data with an external source, or when you have stuff that needs cleaned up. In this case you should be able to do everything you need w/o it
pradeep
pradeep2y ago
i tried it but i failed today i almost wasted whole day in this const {theme ,setTheme}=useTheme();//which is from next theme i don't know why when it is changing the theme value compoent is not rerendering and my button is in halt on dark mode until you click it
Josh
Josh2y ago
Well now your not updating localstoragetheme Ahh your on click is changing based on it rather then your current theme state
pradeep
pradeep2y ago
i just correct it all those things now everything works fine i use contrl+shift+l change name for some reason what cause lot of problem
Want results from more Discord servers?
Add your server