service-website/src/components/SearchTerm.js

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