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•16mo 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•16mo ago

Your setting localstoragetheme to a function

pradeep•16mo ago

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

Josh•16mo ago

Iirc, no But test it and see It might

pradeep•16mo ago

it does i know it

barry•16mo ago

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

Josh•16mo ago

Ahh, so it does

pradeep•16mo ago

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

barry•16mo ago

Because that's how it works

Josh•16mo ago

No You don't

barry•16mo ago

Yes you do

Josh•16mo ago

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

pradeep•16mo ago

yeah so where is problem?

barry•16mo ago

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

Josh•16mo ago

It does because I do it in my projects lol

Gaming

Programming

useState is not working