Bootstrap dropdown in react is not working

Question

This is my code, everything is fine but when I click on the dropdown button, it shows a blank option like there is no option available to show in the dropdown menu.

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { DropdownButton, Dropdown } from "react-bootstrap";
import "bootstrap/dist/js/bootstrap.min.js";

const  App=()=> {

  const [cities, setCities] = useState(["agra", "delhi"])

    return (
      <div className="App">
        <h2 className="text-center">Welcome to Nivaran</h2>

        <DropdownButton id="dropdown-basic-button" title="Choose State">
          {cities.map(city => {
            <Dropdown.Item href="#">{city}</Dropdown.Item>
          })}
        </DropdownButton>

      </div>
    );
  }


export default App;

Update:-

Answer- Actually, I am knew to react, I was unaware of the return statement that I was missing

{cities.map((city) => {
          return <Dropdown.Item href="#">{city}</Dropdown.Item>;
        })}

[@deepak](https://stackoverflow.com/users/13767516/deepak-kumar) Once go through this blog contains 5 answers hope it works for you :) [Blog Link](https://www.py4u.net/discuss/299985) — Smit Gajera, Dec 02 '21 at 04:54
thank you Sumit Gajera, but my case is different, there is no problem with drop-down because when I use dropdown without map, it works, but it does not work with map — yogesh kumar, Dec 02 '21 at 04:59
Check this for more [Bootstrap Dropdown - stackoverflow](https://stackoverflow.com/questions/50980046/bootstrap-dropdown-not-working-in-react/54188034) — Lahiru Supunchandra, Dec 02 '21 at 05:01

score 0 · Answer 1 · answered Dec 02 '21 at 04:56

you have missed return inside the dropdown now it will work

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { DropdownButton, Dropdown } from 'react-bootstrap';
import 'bootstrap/dist/js/bootstrap.min.js';

const App = () => {
  const [cities, setCities] = useState(['agra', 'delhi']);

  return (
    <div className="App">
      <h2 className="text-center">Welcome to Nivaran</h2>

      <DropdownButton id="dropdown-basic-button" title="Choose State">
        {cities.map((city) => {
          return <Dropdown.Item href="#">{city}</Dropdown.Item>;
        })}
      </DropdownButton>
    </div>
  );
};

export default App;

Parth Navadiya · Accepted Answer · 2021-12-02T05:08:05.240

0

You missed the return jsx while map the cities

 {cities.map((city) => {
     return <Dropdown.Item href="#">{city}</Dropdown.Item>;
  })}

Or you can check without return like below

 {cities.map(city => 
     <Dropdown.Item href="#">{city}</Dropdown.Item>
 )}

I hope it will work for you. Thanks!

edited Dec 02 '21 at 05:08

answered Dec 02 '21 at 04:58

Parth Navadiya

720
7
9

Thanks, actually, I am knew to react, I was unaware of return statement – yogesh kumar Dec 02 '21 at 05:03
You can also map without return statement. – Parth Navadiya Dec 02 '21 at 05:09

Bootstrap dropdown in react is not working

2 Answers2