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,36 +11,32 @@ type Props = {
     updateOption: (checked: boolean, name: string) => void;
 };
 
-class TeamFilterCheckbox extends React.PureComponent<Props> {
+const TeamFilterCheckbox = ({
-    toggleOption = () => {
+    id,
-        const {checked, id, updateOption} = this.props;
+    name,
+    checked,
+    label,
+    updateOption,
+}: Props) => {
+    const toggleOption = useCallback(() => {
         updateOption(!checked, id);
-    };
+    }, [checked, id, updateOption]);
 
-    render() {
+    return (
-        const {
+        <div className='TeamFilterDropdown_checkbox'>
-            checked,
+            <label>
-            id,
+                <input
-            label,
+                    type='checkbox'
-            name,
+                    id={id}
-        } = this.props;
+                    name={name}
+                    checked={checked}
+                    onChange={toggleOption}
+                />
 
-        return (
+                {label}
-            <div className='TeamFilterDropdown_checkbox'>
+            </label>
-                <label>
+        </div>
-                    <input
+    );
-                        type='checkbox'
+};
-                        id={id}
-                        name={name}
-                        checked={checked}
-                        onChange={this.toggleOption}
-                    />
 
-                    {label}
+export default React.memo(TeamFilterCheckbox);
-                </label>
-            </div>
-        );
-    }
-}
-
-export default TeamFilterCheckbox;