Dropdown dont show onClick React.js

Question

Hello so i have a question when i click on my navbar icon it shoul open a dropdown so when i click it changes the div name but the css props stays the initial div class anyone can help me, i dont know where im doing mistake i think it should have worked

  <div className='action'>
        <div className='profile' onClick={this.menuToggle}>
          <img src={Avatar} alt="Avatar" />
        </div>

        <div className={`menuDropdown ${active ? "active" : ""}`}>
          <ul>
            <li><a href='#' />Ver Perfil</li>
            <li><a href='#' />Logout</li>
          </ul>
        </div>
      </div>

    class NavBarClient extends Component {
  constructor() {
    super();
    this.state = {
      active: false

    };

  }



  menuToggle = () => {

    this.setState({ active: !this.state.active });

  }

  render() {
    const { active } = this.state;

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

Answer 1

In the css file you should get the .active css object out of the .menuDropdown object.

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

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