From d239697384e2f1a892416dd1cb8937631b34dc8d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 26 Jan 2022 13:01:29 +0000
Subject: [PATCH] Fix React unique key errors (#7640)

---
 .../views/messages/MessageActionBar.tsx       | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx
index 7387e0cc7b..969ae0a4de 100644
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@@ -304,13 +304,12 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
             key="cancel"
         />;
 
-        const threadTooltipButton = <CardContext.Consumer>
+        const threadTooltipButton = <CardContext.Consumer key="thread">
             { context =>
                 <RovingAccessibleTooltipButton
                     className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
                     title={_t("Reply in thread")}
                     onClick={this.onThreadClick.bind(null, context.isCard)}
-                    key="thread"
                 />
             }
         </CardContext.Consumer>;
@@ -339,17 +338,17 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                 // The only catch is we do the reply button first so that we can make sure the react
                 // button is the very first button without having to do length checks for `splice()`.
                 if (this.context.canReply) {
-                    toolbarOpts.splice(0, 0, <>
+                    if (this.showReplyInThreadAction) {
+                        toolbarOpts.splice(0, 0, threadTooltipButton);
+                    }
+                    toolbarOpts.splice(0, 0, (
                         <RovingAccessibleTooltipButton
                             className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
                             title={_t("Reply")}
                             onClick={this.onReplyClick}
                             key="reply"
                         />
-                        { (this.showReplyInThreadAction) && (
-                            threadTooltipButton
-                        ) }
-                    </>);
+                    ));
                 }
                 if (this.context.canReact) {
                     toolbarOpts.splice(0, 0, <ReactButton
@@ -368,12 +367,10 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                         key="download"
                     />);
                 }
-            }
-            // Show thread icon even for deleted messages, but only within main timeline
-            if (this.context.timelineRenderingType === TimelineRenderingType.Room &&
-                SettingsStore.getValue("feature_thread") &&
-                this.props.mxEvent.getThread() &&
-                !isContentActionable(this.props.mxEvent)
+            } else if (SettingsStore.getValue("feature_thread") &&
+                // Show thread icon even for deleted messages, but only within main timeline
+                this.context.timelineRenderingType === TimelineRenderingType.Room &&
+                this.props.mxEvent.getThread()
             ) {
                 toolbarOpts.unshift(threadTooltipButton);
             }