import React, { PropTypes } from 'react';

import '../../styles/search-form.css';

const SearchForm = ({ onSearch }) => (
  <div className="search-form">
    <form onSubmit={() => onSearch("Pay")}>
      SearchForm
      <input type="submit" value="Search" />
    </form>
  </div>
);

SearchForm.propTypes = {
  onSearch: PropTypes.func.isRequired
};

export default SearchForm;

@@ -8,16 +8,27 @@
 React, %7B
+ Component,
  PropTyp
@@ -46,16 +46,16 @@
 react';%0A
-
 %0Aimport 
@@ -92,12 +92,12 @@
 ;%0A%0Ac
-onst
+lass
  Sea
@@ -108,30 +108,218 @@
 orm 
-= (%7B onSearch %7D) =%3E
+extends Component %7B%0A  handleSubmit = (e) =%3E %7B%0A    e.preventDefault();%0A    const onSearch = this.props.onSearch;%0A    onSearch(%22pay%22);%0A  %7D%0A%0A  render() %7B%0A    const onSearch = this.props.onSearch;%0A    return
  (%0A
+    
   %3Cd
@@ -346,16 +346,20 @@
 -form%22%3E%0A
+    
     %3Cfor
@@ -374,49 +374,73 @@
 it=%7B
-() =%3E onSearch(%22Pay%22)%7D%3E%0A      SearchForm%0A
+this.handleSubmit%7D%3E%0A          %3Cinput type=%22text%22 value=%22%22 /%3E%0A    
     
@@ -476,24 +476,28 @@
 %22Search%22 /%3E%0A
+    
     %3C/form%3E%0A
@@ -496,16 +496,20 @@
 %3C/form%3E%0A
+    
   %3C/div%3E
@@ -509,18 +509,28 @@
  %3C/div%3E%0A
-);
+    );%0A  %7D%0A%7D
 %0A%0ASearch

update search form