Use of Cookies between two components

Question

I have two Sidebar components. Both of them have a function that acts as a toggle. What I want to do is the program initially starts with the Sidebar.js component. The sidebar component's toggle property will be true by default.

Then, when I press the link to the processes page, the ProcessSidebar.js component is called there. I want to save the isContentToggled value in the cookies in Sidebar.js, then read the isContentToggled value in ProcessSidebar.js and affect my Sidebar accordingly.

I want to do the opposite in the same way. I want to save the value of isContentToggled to cookies in ProcessSidebar.js, then read the value of isContentToggled in Sidebar.js and affect my Sidebar accordingly.

I put my code below.

Sidebar.js

`

import React, { useState } from 'react';
    import { useCookies } from 'react-cookie';
    
    import profileImage from '../../../assets/img/profil.jpg';
    import iconImage from '../../../assets/img/icon.jpg';
    import businessManImage from '../../../assets/img/business-man-white.svg';
    import preferencessImage from '../../../assets/img/cogs-white.svg';
    import logoutImage from '../../../assets/img/logout.svg';
    import toggleImage from '../../../assets/img/toggle-icon.png';
    import profileWhite from '../../../assets/img/profile-white.svg';
    import classes from '../Sidebar/Sidebar.module.css';
    
    const Sidebar = props => {
      const [isContentToggled, setIsContentToggled] = useState(true);
      let url = ""
      return (
        <div>
          <div className={classes['side-bar']}>
            <div className={classes['side-bar-top']}>
              <div className={classes['side-bar-icon']}>
                <img src={iconImage} alt="profileresmi" />
              </div>
            </div>
    
    
            <div className={classes['side-bar-row']} style={{ height: '100px' }} >
              <div className={classes['side-bar-icons']} style={{ width: '100px' }} >
                <div className={classes['side-bar-profile-image']}>
                  <img src={profileImage} alt="profileresmi" />
                </div>
              </div>
              {isContentToggled && (
                <div className={classes['side-bar-profile-content']}>
                  <h3><b>Mert EKİNCİ</b></h3>
                  <h4>mert@akturk.de</h4>
                </div>
              )};
                    </div>
    
            <div className={classes['side-bar-row']}>
              <div className={classes['side-bar-icons']}>
                <a href={url} className={classes['side-bar-elements-icons']}>
                  <img src={businessManImage} alt="profileresmi" />
                </a>
              </div>
              {isContentToggled && (
                <div className={classes['side-bar-text']}>
                  <a href="/processes" class="active" >Processes</a>
                </div>
              )}
            </div>
    
            <div style={{ clear: 'both' }} ></div>
            <div className={classes['side-bar-row']}>
              <div className={classes['side-bar-icons']}>
                <a href={url} className={classes['side-bar-elements-icons']}>
                  <img src={preferencessImage} alt="profileresmi" />
                </a>
              </div>
              {isContentToggled && (
                <div className={classes['side-bar-text']}>
                  <a href="/preferences" class="active">Preferences</a>
                </div>
              )}
            </div>
    
            <div className={classes['side-bar-row']}>
              <div className={classes['side-bar-icons']}>
                <a href={url} className={classes['side-bar-elements-icons']}>
                  <img src={profileWhite} alt="profileresmi" />
                </a>
              </div>
              {isContentToggled && (
                <div className={classes['side-bar-text']}>
                  <a href="/profile" class="active">User</a>
                </div>
              )}
            </div>
    
            <div className={classes['side-bar-row']}>
              <div className={classes['side-bar-icons']}>
                <a href={url} className={classes['side-bar-elements-icons']}>
                  <img src={logoutImage} alt="profileresmi" />
                </a>
              </div>
              {isContentToggled && (
                <div className={classes['side-bar-text']}>
                  <a href="/auth/login" class="active">Logout</a>
                </div>
              )}
            </div>
    
          </div>
          <div className={classes['side-toggle']}>
            <span onClick={() => setIsContentToggled(prevIsContentToggled => !prevIsContentToggled)
    
    
            } className={classes['side-bar-toggle']}>
              <img src={toggleImage} alt="profileresmi" />
            </span>
          </div>
        </div>
    
      );
    }
    
    export default Sidebar;

`

**ProcessSidebar.js**


`

import React, { useState } from 'react';
import { useCookies } from 'react-cookie';

import iconImage from '../../../assets/img/icon.jpg';
import backArrowImage from '../../../assets/img/back-arrow.png';
import toggleImage from '../../../assets/img/toggle-icon.png';
import classes from '../Sidebar/Sidebar.module.css';

const ProcessSidebar = props => {
  const [isContentToggled, setIsContentToggled] = useState(true);
  let url = ""

  return (
    <div>
      <div className={classes['side-bar']}>
        <div className={classes['side-bar-top']}>
          <div className={classes['side-bar-icon']}>
            <img src={iconImage} alt="" />
          </div>
        </div>

        <div className={classes['side-bar-row']} style={{ height: '70px', display: 'flex', alignItems: 'center' }}>
          <div className={classes['side-bar-icons']}>
            <a href={url} className={classes['side-bar-elements-icons']}>
              <div className={classes['back-arrow']}>
                <img src={backArrowImage} alt="" />
              </div>
            </a>
          </div>
          {isContentToggled && (
            <div className={classes['side-bar-text']} style={{width : '200px', textAlign: 'center', marginLeft: '.5rem'}} >
              <a href="/" class="active">HOME PAGE</a>
            </div>
          )}

        </div>

        {isContentToggled && (<div id="process-list" className={classes['side-bar-text']}></div>
        )}


        <div className={classes['side-toggle']}>
          <span onClick={() => setIsContentToggled(prevIsContentToggled => !prevIsContentToggled)} className={classes['side-bar-toggle']}>
            <img src={toggleImage} alt="toggle" />
          </span>
        </div>

      </div>
    </div>
  )
};


export default ProcessSidebar;

`

Answer 1

I assume you are using useCookie because you want to persist the variable value if the user refreshes the page if it's not the case then you may be using useContext for easily sharing the state between your two components.

Just utilize the useEffect hook to initialize the cookie if it isn't already and update it each time the user toggle the sidebar.

const [isContentToggled, setIsContentToggled] = useState(true);
const [cookies, setCookie, removeCookie] = useCookies(['sideBarToggleCookie']);

useEffect(() => {
  if (!cookies.sideBarToggleCookie)
    setCookie('sideBarToggleCookie', isContentToggled)
  else
    setIsContentToggled(cookies.sideBarToggleCookie)

  if (cookies.sideBarToggleCookie !== isContentToggled)
    setCookie('sideBarToggleCookie', isContentToggled)
}, [isContentToggled])

Also in the onClick just toggle the value like this then it will update the component and the useEffect will change the cookie value:

setIsContentToggled(!isContentToggled)

I didn't try the code but hope it will give you an idea on how to do it.