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

pradeepOP•2y 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•2y ago

Your setting localstoragetheme to a function

pradeepOP•2y ago

what that mean? useState(()=>"hello") it will put usestate value to "hello" right?

Josh•2y ago

Iirc, no But test it and see It might

pradeepOP•2y ago

it does i know it

barry•2y ago

You have to use clsx or cn, to have conditional styles.

Josh•2y ago

Ahh, so it does

pradeepOP•2y ago

oh why? can't we do it will template string?

barry•2y ago

Because that's how it works

Josh•2y ago

No You don't

barry•2y ago

Yes you do

Josh•2y ago

You're talking about the inline shorthand if in the string interp? That will work perfectly fine

pradeepOP•2y ago

yeah so where is problem?

barry•2y ago

${localStorageTheme === "dark" ? "translate-x-[-93%] " : "translate-x-0"} This does not work with tailwind.

Josh•2y ago

It does because I do it in my projects lol

pradeepOP•2y ago

yeah same

Josh•2y ago

Also, to do negative translations with tailwind, use -translate-x-[93%]

pradeepOP•2y ago

but that is not problem it is giving me translate-x-0

Sybatron•2y ago

isnt the problem in this you set default value and then immediately remove that default value with theme

Josh•2y ago

Ahh

pradeepOP•2y 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•2y ago

Yeah yeah, good catch

pradeepOP•2y 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

pradeepOP•2y 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•2y 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

pradeepOP•2y 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•2y ago

Well now your not updating localstoragetheme Ahh your on click is changing based on it rather then your current theme state

pradeepOP•2y 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

Gaming

Programming

useState is not working