Many  React Developers easily make web designs with the help of React-Bootstrap. So, In this post, I will guide you on how to use the React-bootstrap drop-down and get their value.





Firstly, we have to install react-bootstrap


npm install react-bootstrap bootstrap




Then, In index.html we have to paste CDN

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
  />


App.js



We have to use onSelect instead of onChange , onSelect event occcurs when after some value or text has been selected on an element. 
Store the value in the state:

In dropDownState, We have to store event Key of Drop-down such as:


eventKey 1 for Active, eventKey 2 for Pending  and eventKey 3 for Completed.

And In another state, we have to store drop-down titles and their initial value is Active.

import { useState } from "react";
import Dropdown from "react-bootstrap/Dropdown";
import "./App.css";

function App() {
  const [dropDownState, setDropdownState] = useState();
  const [value, setStateValue] = useState("Active");
  const handleSelect = (e, key) => {
    setDropdownState(e);
    setDropdownStateValue(key.target.title);
  };
  return (
    <div className="App">
      <Dropdown onSelect={handleSelect}>
        <Dropdown.Toggle variant="success" id="dropdown-basic">
          {dropDownStateValue}
        </Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Item eventKey="1" title="Active">
            Active
          </Dropdown.Item>
          <Dropdown.Item eventKey="2" title="Pending">
            Pending
          </Dropdown.Item>
          <Dropdown.Item eventKey="3" title="Completed">
            Completed
          </Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
}

export default App;




To be continue ........