SearchBox using useFormState hook

1 files changed, 11 insertions, 24 deletions

diff --git a/vnext/src/components/SearchBox.js b/vnext/src/components/SearchBox.js
index 314b89fb..edd7dfcf 100644
--- a/vnext/src/components/SearchBox.js
+++ b/vnext/src/components/SearchBox.js
@@ -2,33 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ReactRouterPropTypes from 'react-router-prop-types';
 import { withRouter } from 'react-router-dom';
+import { useFormState } from 'react-use-form-state';
 
-class SearchBox extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            search: ''
-        };
-    }
-    handleChange = (event) => {
-        this.setState({
-            search: event.target.value
-        });
-    }
-    onSubmit = (event) => {
-        const { history, pathname } = this.props;
+function SearchBox({ onSearch, history, pathname }) {
+    let onSubmit = (event) => {
         event.preventDefault();
-        this.props.onSearch(history, pathname, this.state.search);
-        this.setState({
-            search: ''
-        });
-    }
-    render() {
-        return (<form onSubmit={this.onSubmit}>
-                  <input name="search" className="text"
-                    placeholder="Search..." value={this.state.search} onChange={this.handleChange} />
-                </form>);
+        onSearch(history, pathname, formState.values.search);
     }
+    const [formState, { text }] = useFormState();
+    return (
+        <form onSubmit={onSubmit}>
+            <input name="search" className="text"
+                placeholder="Search..." value={ formState.values.search } {...text('search')} />
+        </form>
+    );
 }
 
 SearchBox.propTypes = {