React
HTML
<div id="app"></div>
React
class SelectApp extends React.Component {
constructor(props) {
super(props)
this.state = {
items: [
{ text: "Learn JavaScript", id: 1 },
{ text: "Learn React", id: 2 },
{ text: "Play around in JSFiddle", id: 3 },
{ text: "Build something awesome", id: 4 }
]
}
selected:null
}
handleChange = (e)=>{
var selectedId = e.target.value;
console.log(selectedId);
var selected = this.state.items.find((d)=>(d.id==selectedId));
console.log(selected);
this.setState({selected});
}
render() {
return (
<div>
<select onChange={this.handleChange}>
<option disabled selected>Select</option>
{this.state.items.map((item, i) => (
<option key={i} value={item.id}>{item.text}</option>
))}
</select>
</div>
)
}
}
ReactDOM.render(<SelectApp />, document.querySelector("#app"))