Simple Dropdown components for React

Using third-party libraries

• react-dropdown: A lightweight library for simple dropdown needs.

• react-select: A powerful, customizable library that supports features like search, multi-select, and async data loading.

• Just install by using commands npm install react-dropdown and npm install react-select

• For more detail learning refer to this link : https://react.dev/reference/react-dom/components

•   import React, { useState } from "react";
    import Dropdown from "react-dropdown";
  
    const MyDropdown = () => {
      const options = ["Apple", "Grape", "Pine", "Mango"]
  
      const [selected, setSelected] = useState(options[0])
  
      const handleSelect = (option) => {
        setSelected(option.value);
        console.log("Selected:", option.value)
      };
  
      return (
        <div style={{ width: "250px", margin: "20px auto" }}>
          <h3>Select a Fruit</h3>
          <Dropdown
            options={options}
            onChange={handleSelect}
            value={selected}
            placeholder="Select an option"
          />
          <p>Current selection: {selected}</p>
        </div>
      );
    };
  
    export default MyDropdown;
  

•   import React ,{ useState } from "react";
    import Select from "react-select";
  
    const Reactselect = () => {
      let fruitOptions = [
        { value: "apple", label: "Apple" },
        { value: "grape", label: "Grape" },
        { value: "pine", label: "Pine" },
      ];
      const [selectedOption, setSelectedOption] = useState(fruitOptions[0])
  
      return (
        <div>
          <Select
            options={fruitOptions}
            value={selectedOption}
            onChange={(option) => setSelectedOption(option)}
          />
          <p>Selected option is : {selectedOption?.label}</p>
        </div>
      );
    };
    export default Reactselect;
  

• Using the built-in <select> element

  React also supports the standard HTML <select> element, which can be controlled using React state. While it doesn’t come with advanced features out-of-the-box, it’s a reliable and lightweight option for simple use cases.

•   import React ,{ useState } from "react";
  
    const SelectBox = ()=> {
      const [selectedFruit, setselectedFruit] = useState("apple");
  
      return (
        <div>
          <label>
            <select
              value={selectedFruit}
              onChange={(e) => setselectedFruit(e.target.value)}
            >
              <option value="apple">Apple</option>
              <option value="grape">Grape</option>
              <option value="pine">Pine</option>
            </select>
          </label>
          <p>Your favorite fruit: {selectedFruit}</p>
        </div>
      );
    }
    export default SelectBox;