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.entries(this.recipes)
              .filter(function([recipeName, recipe]) {
                return recipe.hidden !== true
              })
              .map(function([recipeName, recipe]) {
                    return <option key={recipeName}>{recipeName}</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>
        );
    }
};