diff options
| -rw-r--r-- | vnext/src/components/SearchBox.js | 35 |
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 = { |