make dropdown menu visible using react

Question

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.

Answer 1

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.