import React from 'react';
import SearchStore from '../stores/SearchStore';
import SearchActions from '../stores/SearchActions';
 
class Search extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      value: SearchStore.getValue()
    };
    this.handleChange = this.handleChange.bind(this);
    this.updateState = this.updateState.bind(this);
  }

  updateState() {
    this.setState({value: SearchStore.getValue()});
  }

  handleChange(event) {
    SearchActions.update(event.target.value);
  }

  componentDidMount() {
    SearchStore.addChangeListener(this.updateState);
  }

  componentWillUnmount() {
    SearchStore.removeChangeListener(this.updateState);
  }

  render() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }
}

export default Search;

@@ -247,21 +247,21 @@
 %7B%0A      
-value
+query
 : Search
@@ -269,21 +269,21 @@
 tore.get
-Value
+Query
 ()%0A    %7D
@@ -432,21 +432,21 @@
 tState(%7B
-value
+query
 : Search
@@ -458,13 +458,13 @@
 .get
-Value
+Query
 ()%7D)
@@ -752,13 +752,13 @@
    %3C
-input
+form%3E
 %0A   
@@ -762,16 +762,23 @@
         
+%3Cinput 
 type=%22te
@@ -780,24 +780,16 @@
 e=%22text%22
-%0A       
  value=%7B
@@ -803,59 +803,77 @@
 ate.
-value%7D%0A        onChange=%7Bthis.handleChange%7D
+query%7D /%3E%0A        %3Cinput type=%22submit%22 value=%22Search%22 /%3E
 %0A      
-/
+%3C/form
 %3E%0A  

add search button