Reusable Dropdown component example in react js

• Create Components folder under src folder
• Create  common folder under Components folder
• Create Dropdown folder under common folder
• Add index.js file under Dropdown folder and add below Code

import React from "react";

const Dropdowm = ({

  id,

  name,

  options,

  title,

  handleChange,

  selectedValue

}) => (

  <div>

    <h1>{title}</h1>

    <select id={id} name={name} onChange={handleChange} value={selectedValue}>

      {options.map(option => (

        <option key={option.value} value={option.value}>

          {option.label}

        </option>

      ))}

    </select>

  </div>

);

export default Dropdowm;

• Add style.css file and add below Code

// CSS Code here

• Go to Components Folder and Add DropdownEXP.js file and add below Code

import React from "react";

import Dropdown from "./common/Dropdown/index";

const options = [

  { label: "Location 1", value: 1 },

  { label: "Location 2", value: 2 },

  { label: "Location 3", value: 3 },

  { label: "Location 4", value: 4 },

  { label: "Location 5", value: 5 },

  { label: "Location 6", value: 6 }

];

class DropdownEXP extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      SeletedVal: ""

    };

  }

  handleChange = e => {

    var value = e.target.value;

    this.setState({

      SeletedVal: value

    });

  };

  render() {

    return (

      <div className="App">

        <Dropdown

          id={"ddl1"}

          name={"ddllocation"}

          options={options}

          title={"Locations"}

          handleChange={this.handleChange}

          selectedValue={this.state.SeletedVal}

        />

      </div>

    );

  }

}

export default DropdownEXP;

• Open App.js file and update code as below

import React from 'react';

import DropdownEXP from './Components/DropdownEXP'

function App() {

  return (

    <div>

      <DropdownEXP/>

    </div>

  );

}

export default App;

Output: