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.state = {
   8             value: '',
   9         };
  10         this.handleChange = this.handleChange.bind(this);
  11         this.handleAddTerm = this.handleAddTerm.bind(this);
  12         this.handleRemoveTerm = this.handleRemoveTerm.bind(this);
  13     }
  14
  15     handleChange(event) {
  16         const target = event.target;
  17         const value = target.value;
  18         this.setState({
  19             value,
  20         });
  21     }
  22
  23     handleAddTerm(event) {
  24
  25     }
  26
  27     handleRemoveTerm(event) {
  28         const index = this.props.index;
  29         this.props.onRemoveTerm(index);
  30     }
  31
  32     render() {
  33         return (
  34             <div key={this.props.index} className="search-term">
  35                 <input type="text" onChange={this.handleChange}/>
  36                 <button onClick={this.handleRemoveTerm}>Remove</button>
  37             </div>
  38         );
  39     }
  40 }
  41
  42 SearchTerm.propTypes = {
  43     index: PropTypes.number.isRequired,
  44     onAddTerm: PropTypes.func.isRequired,
  45     onRemoveTerm: PropTypes.func.isRequired,
  46 };
  47
  48 export default SearchTerm;