Home > OS >  React state with boolean type in local storage in typescript
React state with boolean type in local storage in typescript

Time:11-16

So I have a react state that tracks dark/light mode by darkMode being false or true.

const [darkMode, setDarkMode] = useState(false)

And I have a function that changes the state:

const handleChange = () => {
    setDarkMode(prevDarkMode => localStorage.setItem('darkMode', JSON.stringify(!prevDarkMode))) 
  }

I get 2 errors:

1.Argument of type '(prevDarkMode: boolean) => void' is not assignable to parameter of type 'SetStateAction'.

2.Type '(prevDarkMode: boolean) => void' is not assignable to type '(prevState: boolean) => boolean'. Type 'void' is not assignable to type 'boolean'.

How do I fix this?

CodePudding user response:

Need to return a value in setState

setDarkMode(prevDarkMode => {
   localStorage.setItem('darkMode', JSON.stringify(!prevDarkMode))
   return !prevDarkMode
}) 
  • Related