react-font-style/src/ui/Dropdown.js

React font style editor

import React, {Component} from 'react';

import styles from './Dropdown.css';

export default class Dropdown extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let {selectedKey, icon, ...otherProps} = this.props;
    return (
      <span className={styles.root} title={selectedKey}>
        <select {...otherProps} value={selectedKey} onChange={this._onChange}>
          {this._renderChoices()}
        </select>
        <i className={styles[`icon-${icon}`]}/>
        <span className={styles.value}>{selectedKey}</span>
      </span>
    );
  }

  _onChange = (event) => {
    let value = event.target.value;
    this.props.onChange(value);
  }

  _renderChoices = () => {
    let {choices} = this.props;
    return choices.map(({label}) => (
      <option key={label} value={label}>{label}</option>
    ));
  }
}