make dropdown menu visible using react - reactjs

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

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

Answer 2

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.