Breaking News: Grepper is joining You.com. Read the official announcement!

active class in react js

Helpful Hamster answered on September 21, 2022 Popularity 9/10 Helpfulness 3/10

answer active class in react js

related React: Active component

active class in react js

Comment

class SideNavbar extends React.Component {
  state = {
    links: [
      {
        id: 1,
        name: "Link1",
        to: "/cms",
        className: "side_nav_item"
      },
      {
        id: 2,
        name: "Link2",
        to: "/cms",
        className: "side_nav_item"
      },
      {
        id: 3,
        name: "Link3",
        to: "/cms",
        className: "side_nav_item"
      },
      {
        id: 4,
        name: "Link4",
        to: "/cms",
        className: "side_nav_item"
      }
    ],
    activeLink: null
  };

  handleClick = id => {
    this.setState({ activeLink: id });
  };

  render() {
    const { links, activeLink } = this.state;

    return (
      <div>
        {links.map(link => {
          return (
            <div key={link.id}>
              <ul>
                <li
                  onClick={() => this.handleClick(link.id)}
                  className={
                    link.className +
                    (link.id === activeLink ? " active_item" : "")
                  }
                >
                  {link.name} {link.id === activeLink && "active!"}
                </li>
              </ul>
            </div>
          );
        })}
      </div>
    );
  }
}

ReactDOM.render(<SideNavbar />, document.getElementById("root"));

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: class javascript

Link to this answer
Share Copy Link

Contributed on Dec 25 2022

Helpful Hamster

0 Answers Avg Quality 2/10

Closely Related Answers

React: Active component

Comment

import { useEffect, useState } from 'react';

export default function useIsActiveComponent(ref) {
    const [isActiveComponent, setIsActiveComponent] = useState(false);

    useEffect(() => {
        const handleClickOutside = (e) => {
            if (ref.current) {
                const isActive = ref.current.contains(e.target);
                setIsActiveComponent(isActive);
            }
        };

        document.addEventListener('click', handleClickOutside);
        return () => {
            document.removeEventListener('click', handleClickOutside);
        };
    });

    return isActiveComponent;
}

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Sep 21 2022

Avril Henry

0 Answers Avg Quality 2/10

active class in react js

Contents

More Related Answers

active class in react js

Closely Related Answers

React: Active component

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.