From f0faf367a333892cb099363f813b1d7d72b8ff0d Mon Sep 17 00:00:00 2001
From: Severiano Badajoz <sbadajoz@chanzuckerberg.com>
Date: Wed, 27 May 2020 12:17:56 -0700
Subject: [PATCH] render Truncate's child instead of creating own component to
 render

---
 client/src/components/util/truncate.js | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/client/src/components/util/truncate.js b/client/src/components/util/truncate.js
index e8d2016b..9d103ca4 100644
--- a/client/src/components/util/truncate.js
+++ b/client/src/components/util/truncate.js
@@ -52,18 +52,17 @@ export default class Truncate extends Component {
   };
 
   render() {
-    const {
-      children,
+    const { children, size, fontSize } = this.props;
+    const originalString = children[0].text;
+    const truncatedString = this.maybeTruncateString(
+      originalString,
       size,
-      fontSize,
-      "data-testid": testID,
-      "data-testclass": testClass,
-      style,
-    } = this.props;
-    const truncatedString = this.maybeTruncateString(children, size, fontSize);
+      fontSize
+    );
+    children[0].text = truncatedString;
     return (
       <Tooltip
-        content={children}
+        content={originalString}
         disabled={truncatedString === null}
         hoverOpenDelay={tooltipHoverOpenDelayQuick}
         position={Position.LEFT}
@@ -73,9 +72,7 @@ export default class Truncate extends Component {
           hide: { enabled: false },
         }}
       >
-        <span data-testid={testID} data-testclass={testClass} style={style}>
-          {truncatedString || children}
-        </span>
+        {children}
       </Tooltip>
     );
   }