React, store boolean value using custom hook , but it doesnt work

Question

I using React 18 and testing with sandbox env(codepen.io). I practice using LocalStorage and Custom Hooks, but it doesnt work as intended.. :(
Here is url:https://codepen.io/DogeIsFree/pen/qBYmpKj?editors=1111

and Code!

<body>
  <div id="root"></div>
  <script type="text/babel">
    const useLocalStorage = (props) =>
    {
      const [state,setState] = React.useState(()=>{
        return window.localStorage.getItem(props) ||false}
      );
      React.useEffect(()=>{
       window.localStorage.setItem(props,state)
      },[state]);
      return [state,setState];
    }
    const App = () =>{
      const [count,setCount] = React.useState(0);
      const [isLiked,setIsLiked] = useLocalStorage("isLiked");
      
      const handleLike = (event) =>{
        console.log(isLiked) // isLiked false!
        isLiked ?
          console.log("true!") // but, this is result 
        : console.log("false!"); //i expected 
        setIsLiked(!isLiked);
      }
      return(
        <>
          <span>{count}</span>
          <button onClick={handleLike}>Like</button>
        </>
      )
    }
    ReactDOM.createRoot(root).render(<App/>);
  </script>
  
</body>
</html>

In first click, state("Isliked") logged false, but in IF condition( isLiked ? console.log(true!):console.log(false!) ), logged true! .

localStorage stores stuff strings. To set items, do: `localStorage.setItem(_key_, JSON.stringify(_value_))`. To get items, do: `JSON.parse(localStorage.getItem(_key_))` — Ergis, Sep 19 '22 at 08:28

Terry · Accepted Answer · 2022-09-19T08:28:26.130

0

That is because when reading from localStorage, you are getting string instead of a boolean: a string "false" is actually truthy. This is due to how the standards for localStorage are interpreted and implemented by browsers.

You should ensure that you are comparing it against a string "true" when evaluating it as a boolean. That will fix your problem:

const [state, setState] = React.useState(() => {
  return window.localStorage.getItem(props) === "true";
});

There are of course other ways to convert "true" or "false" strings to a boolean.

edited Sep 19 '22 at 08:28

answered Sep 19 '22 at 08:18

Terry

63,248
15
96
118

OMG , Its a string value... Thanks a lot! – Doge Sep 19 '22 at 08:25
the `|| false` part is pointless – Thomas Sep 19 '22 at 08:27
@Thomas that's correct: I've updated the code – Terry Sep 19 '22 at 08:28

score 0 · Answer 2 · answered Sep 19 '22 at 08:19

0

Your variable isLiked contains a string. A string with some length. Hence isLiked?true:false returns true if length of your (string) variable is 1 or greater. I think this is what's happening. Change isLiked to isLiked==="isLiked".

answered Sep 19 '22 at 08:19

Drishti Jain

89
7

React, store boolean value using custom hook , but it doesnt work

2 Answers2