test_feature_for_xircles

Filter.js

import React from 'react';

const KeywordHighlighter = (props) => {
  const allowedKeywords = ["dosage", "happy", "sunny"]; // just some random words that would be highlighted
  const filteredKeywords = allowedKeywords.filter((word) => props.value.includes(word));
  return (
    <div>
      <textarea
        type="text"
        name="keyword"
        value={props.value}
        onChange={props.handleInputChange}
      />
      <span>
        {filteredKeywords.map((word, i) => (
          <span style={{backgroundColor: "red", color: "white"}} key={i}>{word}</span>
        ))}
        </span>
    </div>
  )
}

class Filter extends React.Component {
  constructor() {
    super();
    this.state = {
      keyword: ""
    };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(evt) {
    const inputKeyword = evt.target.value;
    this.setState({ keyword: inputKeyword });
  }

  render(){
    return(
      <header className="header">
        <div className="wrapper">
            <form>
              <KeywordHighlighter handleInputChange={this.handleInputChange} value={this.state.keyword} />
            </form>
        </div>
      </header>
    )
  }
}

export default Filter;