[MM-55335] Convert ./components/admin_console/filter/filter_checkbox.tsx from Class Component to Function Component (#25416)

* migrate filter_checkbox to function from class component

* Update webapp/channels/src/components/admin_console/filter/filter_checkbox.tsx

Co-authored-by: Daniel Espino García <larkox@gmail.com>

* adjust after feedback

* adjust input element to not have conditional rendering

* Revert "adjust input element to not have conditional rendering"

This reverts commit 9d252eb995a168124d63451be83f0ef1387075b1.

---------

Co-authored-by: Daniel Espino García <larkox@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/admin_console/filter/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 = {
     name: string;
@@ -10,20 +10,22 @@ type Props = {
     updateOption: (checked: boolean, name: string) => void;
 };
 
-class FilterCheckbox extends React.PureComponent<Props> {
+function FilterCheckbox({
-    toggleOption = (e: React.MouseEvent) => {
+    name,
+    checked,
+    label,
+    updateOption,
+}: Props) {
+    const toggleOption = useCallback((e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        const {checked, name, updateOption} = this.props;
         updateOption(!checked, name);
-    };
+    }, [name, checked, updateOption]);
 
-    render() {
-        const {name, checked, label} = this.props;
     return (
         <div
             className='FilterList_checkbox'
-                onClick={this.toggleOption}
+            onClick={toggleOption}
         >
             <label>
                 {checked &&
@@ -47,7 +49,6 @@ class FilterCheckbox extends React.PureComponent<Props> {
             </label>
         </div>
     );
-    }
 }
 
-export default FilterCheckbox;
+export default React.memo(FilterCheckbox);