SearchableAddressBook: change to be a function component.

src/components/SearchableAddressBook.tsx

@@ -13,49 +13,32 @@ import { ContactType } from "../pim-types";
 
 import AddressBook from "../components/AddressBook";
 
-class SearchableAddressBook extends React.PureComponent {
-  public props: {
+interface PropsType {
   entries: ContactType[];
   onItemClick: (contact: ContactType) => void;
-  };
-
-  public state: {
-    searchQuery: string;
-  };
-
-  constructor(props: any) {
-    super(props);
-    this.state = { searchQuery: "" };
-    this.handleInputChange = this.handleInputChange.bind(this);
 }
 
-  public handleInputChange(event: React.ChangeEvent<any>) {
-    const name = event.target.name;
-    const value = event.target.value;
-    this.setState({
-      [name]: value,
-    });
-  }
+export default function SearchableAddressBook(props: PropsType) {
+  const [searchQuery, setSearchQuery] = React.useState("");
 
-  public render() {
   const {
     entries,
     ...rest
-    } = this.props;
+  } = props;
 
-    const reg = new RegExp(this.state.searchQuery, "i");
+  const reg = new RegExp(searchQuery, "i");
 
   return (
     <React.Fragment>
       <TextField
         name="searchQuery"
-          value={this.state.searchQuery}
+        value={searchQuery}
         style={{ fontSize: "120%", marginLeft: 20 }}
         placeholder="Find Contacts"
-          onChange={this.handleInputChange}
+        onChange={(event) => setSearchQuery(event.target.value)}
       />
-        {this.state.searchQuery &&
-          <IconButton onClick={() => this.setState({ searchQuery: "" })}>
+      {searchQuery &&
+        <IconButton onClick={() => setSearchQuery("")}>
           <IconClear />
         </IconButton>
       }
@@ -64,6 +47,3 @@ class SearchableAddressBook extends React.PureComponent {
     </React.Fragment>
   );
 }
-}
-
-export default SearchableAddressBook;