How to create dynamic dropdown in react?

How to use the dropdown in react?

Dynamic dropdown you can create with help of the map() method of the javascript. Need to create a separate component It helps to create for the repeated anchor then go to header file or where you need this the component then you can call as below code:

Navlist.js

import React from 'react'

import {Link} from 'react-router-dom'

export default (props) => {

    const renderSubMenu = () => props.subMenu.map((item, i) => <li key={i}><Link to={item.href}>{item.name}</Link></li>);

    return(

        <>

            <li className="nav-item">

                <Link to={props.navLink}>{props.navName}</Link>

                {props.subMenu ? (typeof props.subMenu=="object" ? <ul>{renderSubMenu()}</ul> : null) : null}

            </li>

        </>

    )

}

Header.js

import React from "react"

import NavList from '../components/navlist'

export default () => {

   const state = {

        navSublist: [

            {name:'Home', href:'/',

                // subMenu:[]

            },

            {name:'About', href:'/about',

                subMenu:[

                    {name:"About 1", href:"/about1" },

                    {name:"About 2", href:"/about2" },

                    {name:"About 3", href:"/about3" }

                ]

            },

            {name:'Services', href:'/services',

                subMenu:[

                    {name:"React", href:"/" },

                    {name:"SEO", href:"/" },

                    {name:"Web Development", href:"/" }

                ]

            },

            {name:'Projects', href:'/projects',

               subMenu:[

                   {name:"Registration", href:"/registration"},

                    {name: "Student Info", href:"/studentInfo"}

               ]

            },

            {name:'Contact', href:'/contact',

                subMenu:[

                    {name:"With State Full", href:"/conStateFull" },

                    {name:"Stateless Comp", href:"/conStateLess" }

                    

                ]

            }

        ]

    }

    

   const renderSubNavList = () => {

        return state.navSublist.map((item, i) => <NavList key ={i} subMenu={item.subMenu} navName={item.name} navLink={item.href} />)

    }

    

        return(

            <>

                <header>

                    <ul>

                        {renderSubNavList()}

                        {/* For Testing purpose <NavList key={22} navName="test Menu" subMenu="abc" navLink="/testmenu" /> */}

                    </ul>                    

                </header>

            </>

        )

}

App.js

import React from 'react';

import 'bootstrap/dist/css/bootstrap.min.css'

import 'bootstrap/dist/js/bootstrap.min.js'

import Header from '../src/components/header'

import './App.css';

function App() {

  return (

    <>

      <Header/>

    </>

  );

}

export default App;

Also need to add css because this is custom dynamic dropdown so required some customized css:

li.nav-item{position: relative; width: 100px;}

li.nav-item ul{z-index: 99; display: none; position: absolute;margin: 0;padding: .5rem 1rem;top:0px; left: 100%;list-style: none;width: 200px;background: rgb(240, 237, 237)}

li.nav-item:hover ul{ display: block}

You will found a result like:

Note: When you will create dropdown with this: import {Link} from 'react-router-dom' then you will found an error, Solution is the need to use {BrowserRouter} in the index.js file.

How to create react dropdown with bootstrap?

Same code as above but need some CSS class adding and removing with condition as this: className={typeof props.subMenu =="object" && 'dropdown-toggle'} 

Means this is a condition because where we need dropdown then need to 'dropdown-toggle' CSS class here condition is saying if your submenu have any object then the dropdown-toggle class will be added otherwise class will be blank. You will not find any dropdown symbol or icon. As not given dropdown in the home page see below example:

Navlist.js

import React from 'react'

import {Link} from 'react-router-dom'

export default (props) => {

    const renderSubMenu = () => props.subMenu.map((item, i) =><Link to={item.href} key={i} className="dropdown-item">{item.name}</Link>);

    return(

        <>

            <li>

                <Link to={props.navLink} className={typeof props.subMenu =="object" && 'dropdown-toggle'} data-toggle="dropdown">{props.navName}</Link>

                {props.subMenu ? (typeof props.subMenu =="object" ? <div className="dropdown-menu">{renderSubMenu()}</div> : null) : null}

            </li>

        </>

    )

}

Header.js

import React from "react"

import NavList from '../components/navlist'

export default () => {

    const state = {

        navSublist: [

            { name: 'Home', href: '/' },

            {

                name: 'About', href: '/about',

                subMenu: [

                    { name: "About 1", href: "/about1" },

                    { name: "About 2", href: "/about2" },

                    { name: "About 3", href: "/about3" }

                ]

            },

            {

                name: 'Services', href: '/services',

                subMenu: [

                    { name: "React", href: "/" },

                    { name: "SEO", href: "/" },

                    { name: "Web Development", href: "/" }

                ]

            },

            {

                name: 'Projects', href: '/projects',

                subMenu: [

                    { name: "Registration", href: "/registration" },

                    { name: "Student Info", href: "/studentInfo" }

                ]

            },

            {

                name: 'Contact', href: '/contact',

                subMenu: [

                    { name: "With State Full", href: "/conStateFull" },

                    { name: "Stateless Comp", href: "/conStateLess" }

                ]

            }

        ]

    }

    const renderSubNavList = () => {

        return state.navSublist.map((item, i) => <NavList key={i} subMenu={item.subMenu} navName={item.name} navLink={item.href} />)

    }

    return (

        <>

            <ul>

                {renderSubNavList()}

            </ul>

        </>

    )

}

App.js

import React from 'react';

import 'bootstrap/dist/css/bootstrap.min.css'

import 'jquery/dist/jquery.min.js'

import 'bootstrap/dist/js/bootstrap.min.js'

import './App.css';

import Header from '../src/components/header'

function App() {

  return (

    <>

      <Header />

    </>

  );

}

export default App;