Skip to content

Instantly share code, notes, and snippets.

@gradosevic
Created February 17, 2016 10:17
Show Gist options
  • Save gradosevic/c4ba07169ab68d50250c to your computer and use it in GitHub Desktop.
Save gradosevic/c4ba07169ab68d50250c to your computer and use it in GitHub Desktop.
React DropDown component
/**
* React dropdown component
* Usage: <DropDown selected={selectedValue} items={keyValueObject} onChange={this.externalDropdownOnChangeMethod} />
*
* //For example:
* var keyValueObject = {0 =>'Value 0', 1 => 'Value 1'};
*
* //External on dropdown change method
* externalDropdownOnChangeMethod(e){
* var value = e.target.value;
* }
*/
var DropDown = React.createClass({
getInitialState(){
return {};
},
getDefaultProps(){
return {};
},
render(){
var selValue = this.props.selected;
var items = this.props.items;
if(typeof items === 'object'){
items = Object.keys(items).map(
function (key) {
return items[key];
});
}
return (
<select value={selValue} onChange={this.props.onChange}>
{items.map(this.displayItem)}
</select>
);
},
displayItem(item, index){
return (
<option key={index} value={item['value']}>{item['name']}</option>
);
}
});
export default DropDown;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment