Convert searchBar to a functional component

Curio-org · Oct 15, 2023 · 1d4f225 · 1d4f225
1 parent f0f4803
commit 1d4f225
Showing 1 changed file with 34 additions and 47 deletions.
diff --git a/src/components/UnderHeader/Searchbar.tsx b/src/components/UnderHeader/Searchbar.tsx
@@ -1,4 +1,4 @@
-import React, { FormEvent } from "react";
+import React, { FormEvent, useState } from "react";
 import { Input, Button } from "rsuite";
 import SearchIcon from "@rsuite/icons/Search";
 import "./SearchBar.css";
@@ -7,58 +7,45 @@ interface SearchbarProps {
   handleFormSubmit: (termFromSearchBar: string) => void;
 }
 
-interface SearchbarState {
-  term: string;
-}
-
-class Searchbar extends React.Component<SearchbarProps, SearchbarState> {
-  constructor(props: SearchbarProps) {
-    super(props);
-    this.state = {
-      term: "",
-    };
-  }
+const Searchbar: React.FC<SearchbarProps> = ({ handleFormSubmit }) => {
+  const [term, setTerm] = useState<string>("");
 
-  handleChange = (value: string) => {
-    this.setState({
-      term: value,
-    });
+  const handleChange = (value: string) => {
+    setTerm(value);
   };
 
-  handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    this.props.handleFormSubmit(this.state.term);
+    handleFormSubmit(term);
   };
 
-  render() {
-    return (
-      <div>
-        <form onSubmit={this.handleSubmit}>
-          <div className="curio__search">
-            <div className="curio__search__input">
-              <Input
-                onChange={this.handleChange}
-                value={this.state.term}
-                name="video-search"
-                type="text"
-                id="searchBar"
-                placeholder="Search Video..."
-              />
-              <Button
-                onClick={() => this.handleSubmit}
-                type="submit"
-                appearance="primary"
-                size="sm"
-                id="searchButton"
-              >
-                <SearchIcon />
-              </Button>
-            </div>
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <div className="curio__search">
+          <div className="curio__search__input">
+            <Input
+              onChange={handleChange}
+              value={term}
+              name="video-search"
+              type="text"
+              id="searchBar"
+              placeholder="Search Video..."
+            />
+            <Button
+              onClick={() => handleSubmit}
+              type="submit"
+              appearance="primary"
+              size="sm"
+              id="searchButton"
+            >
+              <SearchIcon />
+            </Button>
           </div>
-        </form>
-      </div>
-    );
-  }
-}
+        </div>
+      </form>
+    </div>
+  );
+};
 
 export default Searchbar;