Set bootstrap switch component to 'checked' if mode is Dark-CodePudding

I have a theme for my web App in my localStorage and I want to add the checked value to the Switch component if the mode is set to 'dark',or unchecked, if the mode is 'light'. However, when I set the theme to 'dark' and refresh the page the switch turn automatically to unchecked, how can I fix that? Below there is the code:

import React, { useState,useEffect } from 'react';
import useTheme from '../custom/useTheme';

export default function Switch() {
  const[active,setActive] = useState(false);

  function handleTheme(){
    if(active === false){
      // Dark mode
      useTheme(true);
      setActive(true);

      localStorage.setItem('mode','dark');
    }else if(active === true){
      // Light mode
      useTheme(false);
      setActive(false);
      localStorage.setItem('mode','light');
    }
  };
  
  return (
    <div id='switchBox' className='form-check form-switch'>
      <input
      id="switch" 
      role="switch"
      // checked
      value={active}
      type="checkbox"
      onClick={()=> handleTheme()}
      className="form-check-input shadow-sm"
      />
      <label
      className='ms-1'
      htmlFor='switch'
      >Dark</label>
    </div>
  )
};

That's how it looks, the Dark theme is on, but the Switch is unchecked.

CodePudding user response：

As the above answer mentions, state is stored in memory and is lost when you refresh the page. While your solution persists the theme state to localstorage you also need to set the initial value of useState to the value stored in localstorage in order to display the correct state after refresh. You can try something like this:

const[active,setActive] = useState(false)

// Get stored data from local storage if available on first render
useEffect(() => {
    // Get stored theme mode and set it in state manager
    const storedTheme = getLocalStorage('mode')
    if(storedTheme) {
        setActive(storedTheme)
    }
}, [])

By passing an empty array as the second parameter to useEffect this will only run on the initial render. For more information on useEffect, refer to the React docs: https://reactjs.org/docs/hooks-effect.html

CodePudding user response：

You can achieve this by using useEffect hook with an empty array. This will trigger the logic inside once when the component is rendered. Inside you can retrieve the previously saved mode property and use it to set the current session state:

useEffect(() => {
    const isLight = localStorage.getItem('mode');
    if (isLight !== undefined) setActive(isLight);
}, [])