From f86ec9da18f4ab383224c89589d6f35e7cf1d7c5 Mon Sep 17 00:00:00 2001
From: Balaji K <balaji6292@gmail.com>
Date: Tue, 17 Oct 2023 16:29:36 +0530
Subject: [PATCH] #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.
---
 .../components/emoji_picker_header.tsx        | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_header.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_header.tsx
index 0dde8427ab..c6b72536d6 100644
--- a/webapp/channels/src/components/emoji_picker/components/emoji_picker_header.tsx
+++ b/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> {
-    render(): React.ReactNode {
-        return (
-            <div className='emoji-picker__header modal-header'>
-                <button
-                    type='button'
-                    className='close emoji-picker__header-close-button'
-                    onClick={this.props.handleEmojiPickerClose}
-                >
-                    <span aria-hidden='true'>{'×'}</span>
-                    <span className='sr-only'>
-                        <FormattedMessage
-                            id={'emoji_picker.close'}
-                            defaultMessage={'Close'}
-                        />
-                    </span>
-                </button>
-                <h4 className='modal-title emoji-picker__header-title'>
+const EmojiPickerHeader = ({handleEmojiPickerClose}: Props) => {
+    return (
+        <div className='emoji-picker__header modal-header'>
+            <button
+                type='button'
+                className='close emoji-picker__header-close-button'
+                onClick={handleEmojiPickerClose}
+            >
+                <span aria-hidden='true'>{'×'}</span>
+                <span className='sr-only'>
                     <FormattedMessage
-                        id={'emoji_picker.header'}
-                        defaultMessage={'Emoji Picker'}
+                        id={'emoji_picker.close'}
+                        defaultMessage={'Close'}
                     />
-                </h4>
-            </div>
-        );
-    }
-}
+                </span>
+            </button>
+            <h4 className='modal-title emoji-picker__header-title'>
+                <FormattedMessage
+                    id={'emoji_picker.header'}
+                    defaultMessage={'Emoji Picker'}
+                />
+            </h4>
+        </div>
+    );
+};
+
+export default React.memo(EmojiPickerHeader);