1

I have a toggle example that I have done with Jquery before. Now I want to do it with react, but I don't know how.

I'm putting my Jquery code and React design code below.

React Design Code

Sidebar.js

`

import React from 'react';
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) => {
  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>
          <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>
          <div className={classes['side-bar-text']}>
            <a href={url}>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>
          <div className={classes['side-bar-text']}>
            <a href={url}>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>
          <div className={classes['side-bar-text']}>
            <a href={url}>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>
          <div className={classes['side-bar-text']}>
            <a href={url}>Logout</a>
          </div>
        </div>

      </div>
      <div className={classes['side-toggle']}>
        <span className={classes['side-bar-toggle']} >
          <img src={toggleImage} alt="profileresmi" />
        </span>
      </div>
    </div>

  );
}

export default Sidebar;

`

Here I made the toggle by hiding and showing my divs.

Jquery Sidebar Toggle Code

Script.js

`

var isToggled = true;

var toggleDelay = 50;

var onclickSideToggle = function () {
    isToggled = !isToggled;
    toggleSidebar(isToggled);
};


$('#side-bar-toggle').on('click', onclickSideToggle);

var toggleSidebar = function (toggle) {

    if (toggle) {
        $('.side-bar-text').show(toggleDelay);
        $('.side-bar-profile-content').show(toggleDelay);

    } else {
        $(".side-bar-text").hide(toggleDelay);
        $('.side-bar-profile-content').hide(toggleDelay);

    }
};

`

Can you give me some information on how to do it with React?

Mert Ekinci
  • 352
  • 2
  • 13

1 Answers1

1

If you want just hide/show without any animation you can use the following approach. More info about usage of useState hook you can find here: https://reactjs.org/docs/hooks-reference.html#usestate

import React, { useState } from 'react';
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={url}>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={url}>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={url}>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={url}>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;

If you want to toggle with the animation code will be almost the same. You will need just to create some additional className like .hidden with styles for hidden elements and replace

{isContentToggled && (
       <div className={classes['side-bar-profile-content']}>
            <h3><b>Mert EKİNCİ</b></h3>
            <h4>mert@akturk.de</h4>
       </div>
)};

with adding/removing this className depending on the isContentToggled value.

kyivcoder
  • 71
  • 3