Question 74364 in Reactjs Question posted in
The new location for the React Documentation can be found here.

unable to toggle dropdown list in react – Reactjs

i have created a simple react project and i was trying to implement drop down list in it.

i am trying to create a dropdown list for profile in react like this->

dropdown.js

   import React, { useState } from "react";
import "./style.css";

function DropdownNavbar() {
  const [toggle, setToggle] = useState(false);

  const menuToggle = () => {
    setToggle(!toggle);
  };

  return (
    <>
      <div className="new-box d-flex" onClick={menuToggle}>
        <div className="profile p-2 flex-fill">
          <img src="images/avatar-img.png" />
        </div>
        <div className="name-text p-2 flex-fill">Alex John</div>
      </div>
      {toggle && (
        <div class="menu">
          <ul>
            <li>
              <a href="#">My profile</a>
            </li>
            <li>
              <a href="#">Inbox</a>
            </li>
            <li>
              <a href="#">Logout</a>
            </li>
          </ul>
        </div>
      )}
    </>
  );
}

export default DropdownNavbar;

style.css

.new-box{
  display: flex;
}

.name-text{
  margin-top: 15px;
}

.profile {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  margin: 5px 10px 5px 0px;
}

 .profile img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 .menu {
  position: absolute;
  top: 120px;
  right: -10px;
  padding: 10px 20px;
  background: #fff;
  width: 200px;
  box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  transition: 0.5s;
  visibility: hidden;
  opacity: 0;
}

 .menu.active {
  top: 80px;
  visibility: visible;
  opacity: 1;
}

 .menu::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 28px;
  width: 20px;
  height: 20px;
  background: #fff;
  transform: rotate(45deg);
}

 .menu h3 {
  width: 100%;
  text-align: center;
  font-size: 18px;
  padding: 20px 0;
  font-weight: 500;
  color: #555;
  line-height: 1.5em;
}

 .menu h3 span {
  font-size: 14px;
  color: #cecece;
  font-weight: 300;
}

 .menu ul li {
  list-style: none;
  padding: 16px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

.menu ul li img {
  max-width: 20px;
  margin-right: 10px;
  opacity: 0.5;
  transition: 0.5s;
}

 .menu ul li:hover img {
  opacity: 1;
}

 .menu ul li a {
  display: inline-block;
  text-decoration: none;
  color: #555;
  font-weight: 500;
  transition: 0.5s;
}

 .menu ul li:hover a {
  color: #ff5d94;
}

i am adding this profile thing in my navbar. navbar is being rendered in App.js
when i click on div nothing happens. can someone help here?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    found a better way to implement drop down (on hover) instead of onclick.

    Dropdown.js

    import React from "react";
import { AiFillCaretDown } from "react-icons/ai";
import "./style.css";

function DropdownNavbar() {
  return (
    <div className="dropdown">
      <button className="dropbtn">
        <div className="new-box d-flex">
          <div className="p-2 flex-fill">
            <img src="images/avatar-img.png" />
          </div>
          <div
            style={{ marginTop: "5px", marginLeft: "10px" }}
            className="p-2 flex-fill"
          >
            <span className="dropdown-text">Alex John</span>
          </div>
          <div
            style={{ marginTop: "8px", marginLeft: "10px" }}
            className="p-2 flex-fill"
          >
            <AiFillCaretDown />
          </div>
        </div>
      </button>
      <div className="dropdown-content">
        <a href="#">Profile</a>
        <a href="#">Help</a>
        <a href="#">Logout</a>
      </div>
    </div>
  );
}

export default DropdownNavbar;

    style.css

    .dropdown {
  float: left;
  overflow: hidden;
  margin-top: 5px;
}

.dropdown img {
  width: 40px;
  height: 40px;
}

.dropdown-text {
  color: Black;
}

.new-box {
  display: flex;
}

.dropdown .dropbtn {
  margin-right: 30px;
  font-size: 16px;
  border: none;
  outline: none;
  background-color: inherit;
  font-family: inherit;
}

.dropdown:hover .dropbtn {
  background-color: #d8d8d8;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #d8d8d8;
}

.dropdown:hover .dropdown-content {
  display: block;
}

  2. 0

    Mistake in handler

    It should be:

    onClick={menuToggle}

    And dont use class – use className, not directly DOM – use useState hook.
    Example:

    const [isOpen, setIsOpen] = useState(false);
  const menuToggle = () => {
    setIsOpen((prev) => !prev);
  };

    <div className={isOpen ? "menu active" : "menu"}>
//...

    https://codesandbox.io/s/kind-rgb-wlwlgf

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search