Dynamic Dropdown List in react js

• Create Components folder under src folder
• Add DynamicDropdownList.js file and add below Code

import React from "react";

class DynamicDropdownList extends React.Component {

constructor(props) {

super(props);

this.state = {

technology: [

{ name: ".net", id: 1 },

{ name: "java", id: 2 },

{ name: "React", id: 3 },

{ name: "PHP", id: 4 }

],

SelectedTechnologyName: "",

SelectedTechnologyValue: ""

};

}

handleChange = e => {

this.setState({

SelectedTechnologyValue: e.target.value

});

};

render() {

let optionTemplate = this.state.technology.map(v => (

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

{v.name}

</option>

));

return (

<div>

Dynamic Dropdown List EXP

<br />

<br />

Select Technology:

<select

value={this.state.SelectedTechnologyValue}

onChange={this.handleChange}

>

<option value="select">Select</option>

{optionTemplate}

</select>

<br />

Selected Technology Value:<p>{this.state.SelectedTechnologyValue}</p>

</div>

);

}

}

export default DynamicDropdownList;

• Open App.js file and update code as below\

import React from "react";

import ReactDOM from "react-dom";

import DynamicDropdownList from "./components/DynamicDropdownList";

function App() {

return (

<div className="App">

<DynamicDropdownList />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output: