Converted Class Component to Function Component, Solved #24783 (#24812)

* Converted Class Component to Function Component, Solved #24783

* Added useCallback

* Removed useState

* Wrapped TeamFilterCheckbox component with React.memo

* Added React.nemo in export line

* Tried to fix issue

* Deleted package.json and package-lock.json (Extra)

* Minor Changes

* Added Copyright Lines

* Fixed check-lint errors

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/admin_console/filter/team_filter_dropdown/team_filter_checkbox.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useCallback} from 'react';
 
 type Props = {
     id: string;
@@ -11,19 +11,16 @@ type Props = {
     updateOption: (checked: boolean, name: string) => void;
 };
 
-class TeamFilterCheckbox extends React.PureComponent<Props> {
+const TeamFilterCheckbox = ({
-    toggleOption = () => {
-        const {checked, id, updateOption} = this.props;
-        updateOption(!checked, id);
-    };
-
-    render() {
-        const {
-            checked,
     id,
-            label,
     name,
-        } = this.props;
+    checked,
+    label,
+    updateOption,
+}: Props) => {
+    const toggleOption = useCallback(() => {
+        updateOption(!checked, id);
+    }, [checked, id, updateOption]);
 
     return (
         <div className='TeamFilterDropdown_checkbox'>
@@ -33,14 +30,13 @@ class TeamFilterCheckbox extends React.PureComponent<Props> {
                     id={id}
                     name={name}
                     checked={checked}
-                        onChange={this.toggleOption}
+                    onChange={toggleOption}
                 />
 
                 {label}
             </label>
         </div>
     );
-    }
+};
-}
 
-export default TeamFilterCheckbox;
+export default React.memo(TeamFilterCheckbox);