+);
+
+class AutosuggestComp extends React.Component {
+ constructor(props) {
+ super(props);
+
+ // Autosuggest is a controlled component.
+ // This means that you need to provide an input value
+ // and an onChange handler that updates this value (see below).
+ // Suggestions also need to be provided to the Autosuggest,
+ // and they are initially empty because the Autosuggest is closed.
+ this.state = {
+ value: props.value,
+ suggestions: []
+ };
+ }
+
+ onChange = (event, { newValue }) => {
+ this.props.onChange(newValue);
+ this.setState({
+ value: newValue
+ });
+ };
+
+ // Autosuggest will call this function every time you need to update suggestions.
+ // You already implemented this logic above, so just use it.
+ onSuggestionsFetchRequested = ({ value }) => {
+ this.setState({
+ suggestions: getSuggestions(this.props.list, value)
+ });
+ };
+
+ // Autosuggest will call this function every time you need to clear suggestions.
+ onSuggestionsClearRequested = () => {
+ this.setState({
+ suggestions: []
+ });
+ };
+
+ render() {
+ const { value, suggestions } = this.state;
+
+ // Autosuggest will pass through all these props to the input.
+ const inputProps = {
+ placeholder: 'Player name',
+ value,
+ onChange: this.onChange
+ };
+
+ // Finally, render it!
+ return (
+
+ );
+ }
+}
+export default AutosuggestComp
\ No newline at end of file
diff --git a/src/components/template.js b/src/components/template.js
index d0c76ac..738972e 100644
--- a/src/components/template.js
+++ b/src/components/template.js
@@ -5,6 +5,7 @@ import Layout from "./layout"
import ProgressBar from "./progress-bar"
import SEO from "./seo"
import Result from "./result"
+import Autosuggest from "./autosuggest"
import Constants from "../constants/config"
import { GetQuizQuestionIndexes } from "../utils/style"
import list from "../jsons/transfer.json"
@@ -57,7 +58,7 @@ class Template extends Component {
}