#24773 Converted ./components/emoji_picker/components/emoji_picker_header.tsx to Function Component (#24803)

* #24773 Converted ./components/emoji_picker/components/emoji_picker_header.tsx to Function Component

* Fixed the lint errors and removed the explicit functional component type

* Added memo to make the functional component pure.

webapp/channels/src/components/emoji_picker/components/emoji_picker_header.tsx

@@ -9,30 +9,30 @@ type Props = {
     handleEmojiPickerClose: MouseEventHandler;
 }
 
-export default class EmojiPickerHeader extends React.PureComponent<Props> {
+const EmojiPickerHeader = ({handleEmojiPickerClose}: Props) => {
-    render(): React.ReactNode {
+    return (
-        return (
+        <div className='emoji-picker__header modal-header'>
-            <div className='emoji-picker__header modal-header'>
+            <button
-                <button
+                type='button'
-                    type='button'
+                className='close emoji-picker__header-close-button'
-                    className='close emoji-picker__header-close-button'
+                onClick={handleEmojiPickerClose}
-                    onClick={this.props.handleEmojiPickerClose}
+            >
-                >
+                <span aria-hidden='true'>{'×'}</span>
-                    <span aria-hidden='true'>{'×'}</span>
+                <span className='sr-only'>
-                    <span className='sr-only'>
-                        <FormattedMessage
-                            id={'emoji_picker.close'}
-                            defaultMessage={'Close'}
-                        />
-                    </span>
-                </button>
-                <h4 className='modal-title emoji-picker__header-title'>
                     <FormattedMessage
-                        id={'emoji_picker.header'}
+                        id={'emoji_picker.close'}
-                        defaultMessage={'Emoji Picker'}
+                        defaultMessage={'Close'}
                     />
-                </h4>
+                </span>
-            </div>
+            </button>
-        );
+            <h4 className='modal-title emoji-picker__header-title'>
-    }
+                <FormattedMessage
-}
+                    id={'emoji_picker.header'}
+                    defaultMessage={'Emoji Picker'}
+                />
+            </h4>
+        </div>
+    );
+};
+
+export default React.memo(EmojiPickerHeader);