input.jsx

/* global React,App*/

App.Input = class Input extends React.Component {
  componentWillMount() {
    this.recipes = App.getData.call();
  }

  render() {
    var self = this;
    var onChangeRecipe = function (event) {
      self.props.onChange({ recipe: event.target.value, ipm: self.props.input.ipm });
    };
    var onChangeIpm = function (event) {
      self.props.onChange({ recipe: self.props.input.recipe, ipm: parseFloat(event.target.value) });
    };

    return (
      <div>
        <p>
          Calculate the requirements for
            <input
            id="recipe"
            type="text"
            list="recipes"
            placeholder="recipe name"
            value={this.props.input.recipe}
            onChange={onChangeRecipe} />
          <datalist id="recipes">
            {Object.keys(this.recipes).map(function (recipe) {
              return <option key={recipe}>{recipe}</option>;
            })}
          </datalist>
          producing at a rate of
            <input
            id="ipm"
            type="number"
            min="0"
            step="any"
            value={this.props.input.ipm}
            onChange={onChangeIpm} />
          item(s) / minute.
            <button id="addAnother" onClick={this.props.onAddAnother}>Add Another</button>
          <button id="clear" onClick={this.props.onClear}>Clear</button>
          <button id="bulk" onClick={this.props.onBulk}>Bulk</button>
        </p>
      </div>
    );
  }
};