make dropdown menu visible using react-CodePudding

I have following code with navbar and dropdown in it. All I want is to make the dropdown visible but I am not able to do it. What should I do. I have my code as Header.jsx

import React, { useState } from 'react'
import { Link } from 'react-router-dom';

const Header = () => {
    const [isVisible, setIsVisible] = useState(false);

  
        return(
    

       
            <div className="menu-container">
                <nav className="nav">
                    <ul className="nav__menu">
                        <li className="nav__menu-item">
                            <Link to="Aboutus">About us</Link>
                            
                        </li>
                        <li className="nav__menu-item">
                            <Link to="Myaccount">My account</Link>
                            
                        </li>
                        <li className="nav__menu-item">
                            <Link to="Featured Product">Featured Product</Link>
                        
                        </li>
                        <li className="nav__menu-item">
                            <Link to="WishList">WishList</Link>
                        
                        </li>
                        <li className="nav__menu-items">
                            <Link to="Order Tracking">Order Tracking</Link>
                        
                        </li>
                        <li className="nav__menu-items">
                                <Link to="English">English</Link>
                                {isVisible && (
                                    <div>
                                <Link to className="box">English</Link>
                                <Link to className="box">German</Link>
                                <Link to className = "box">Spanish</Link>
                                        </div>
                                )}
                        
                        </li>
                        <li className="nav__menu-items">
                            <Link to="USD">USD</Link>
                            {isVisible && (
                                <div>
                                <Link to className="box">USD</Link>
                                <Link to className="box">INR</Link>
                                    <Link to className="box">GBP</Link>
                                    </div>
                            )}
                        
                        </li>
                        </ul>
                        </nav>
                        
                </div>
                
    



      )
    }
  
  export default Header

The code in the English and USD contains the dropdown but I am not able to make it possible visible. How can I make it visible.

CodePudding user response：

Try this.

import React, { useState } from 'react'
import { Link } from 'react-router-dom';

const Header = () => {
    const [isVisible, setIsVisible] = useState(false);
    const toggle = () => {setIsVisible(!isVisible)}

  
        return(     
            <div className="menu-container">
                <nav className="nav">
                    <ul className="nav__menu">
                        <li className="nav__menu-item">
                            <Link to="Aboutus">About us</Link>
                            
                        </li>
                        <li className="nav__menu-item">
                            <Link to="Myaccount">My account</Link>
                            
                        </li>
                        <li className="nav__menu-item">
                            <Link to="Featured Product">Featured Product</Link>
                        
                        </li>
                        <li className="nav__menu-item">
                            <Link to="WishList">WishList</Link>
                        
                        </li>
                        <li className="nav__menu-items">
                            <Link to="Order Tracking">Order Tracking</Link>
                        
                        </li>
                        <li className="nav__menu-items">
                                <Link to="English" onClick={toggle}>English</Link>
                                {isVisible && (
                                    <div>
                                <Link to className="box">English</Link>
                                <Link to className="box">German</Link>
                                <Link to className = "box">Spanish</Link>
                                        </div>
                                )}
                        
                        </li>
                        <li className="nav__menu-items">
                            <Link to="USD" onClick={toggle}>USD</Link>
                            {isVisible && (
                                <div>
                                <Link to className="box">USD</Link>
                                <Link to className="box">INR</Link>
                                    <Link to className="box">GBP</Link>
                                    </div>
                            )}
                        
                        </li>
                        </ul>
                        </nav>
                        
                </div>
                
    



      )
    }
  
  export default Header

CodePudding user response：

You don't change the value of isVisible in your code. You should use setIsVisible function to set the new value of isVisible to true or false, as our want.