title: Assign local storage value in React
body: <p>I implemented a switch button on a  single webpage to enable the user to select between two languages (english and french) - I am trying to use React and i18next library. So far the switch button does the job but I would like to save the user preference in local storage and until now I did not succeed to complete that task.</p>
  <p>As you will notice in the code below I did some tests, replacing the initial state of the switch button (<code>checked: false</code>) by : <code>checked: (lngSelect ? lngSelect : false)</code></p>
  <p>But this doesn't work unfortunately. Also I have no idea if my code is clean enough, I mean if this is the usual way to do that kind of thing.</p>
  <pre><code>import React, { useState } from 'react';
  import Switch from '@material-ui/core/Switch';
  import { useTranslation } from 'react-i18next';
  import footerStyles from '../../styles/footer.module.scss';
  
  function SwitchBtn() {
  
      const lngSelect = localStorage.getItem('LngSelect');
  
      const { i18n } = useTranslation();
      const [state, setState] = useState({
          checked: (lngSelect ? lngSelect : false)
          // checked: false
      });
  
      function handleTranslation(state) {
          if (state) {
              i18n.changeLanguage('fr');
          } else {
              i18n.changeLanguage('en');
          }
          localStorage.setItem('LngSelect', JSON.stringify(state));
      }
  
      return (
          &lt;Switch
              className={footerStyles.switchBtn}
              checked={state.checked}
              onChange={(e) =&gt; {
                  setState({ checked: e.target.checked });
                  handleTranslation(e.target.checked);
              }}
              name=&quot;languagesSwitch&quot;
          /&gt;
      )
  }
  
  export default SwitchBtn
  </code></pre>