service-website/src/components/SearchTerm.js

   1 import React, {Component} from "react";
   2 import PropTypes from "prop-types";
   3
   4 class SearchTerm extends Component {
   5     constructor(props, context) {
   6         super(props, context);
   7         this.handleChange = this.handleChange.bind(this);
   8         this.handleAddTerm = this.handleAddTerm.bind(this);
   9         this.handleRemoveTerm = this.handleRemoveTerm.bind(this);
  10     }
  11
  12     handleChange(event) {
  13         const target = event.target;
  14         const value = target.value;
  15         const id = this.props.index;
  16         this.props.onTermChange(id, value);
  17     }
  18
  19     handleAddTerm(event) {
  20
  21     }
  22
  23     handleRemoveTerm(event) {
  24         const index = this.props.index;
  25         this.props.onRemoveTerm(index);
  26     }
  27
  28     render() {
  29         return (
  30             <div key={this.props.index} className="search-term">
  31                 <input type="text" onChange={this.handleChange}/>
  32                 <button onClick={this.handleRemoveTerm}>Remove</button>
  33             </div>
  34         );
  35     }
  36 }
  37
  38 SearchTerm.propTypes = {
  39     index: PropTypes.number.isRequired,
  40     value: PropTypes.string.isRequired,
  41     onTermChange: PropTypes.func.isRequired,
  42     onAddTerm: PropTypes.func.isRequired,
  43     onRemoveTerm: PropTypes.func.isRequired,
  44 };
  45
  46 export default SearchTerm;