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.

First nowhere you are using dropdown in the code. Next you are using condition isVisible to display USD and English. So where are you assigning the value of isVisible using setIsVisible? — Maniraj Murugan
– Maniraj Murugan, Commented Mar 2, 2022 at 9:12

Dharmik Patel · Accepted Answer · 2022-03-02 09:16:42Z

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

Bejita · Accepted Answer · 2022-03-02 09:13:03Z

0

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.

answered Mar 2, 2022 at 9:13

Bejita

1164 bronze badges

Collectives™ on Stack Overflow

make dropdown menu visible using react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related