From dd53a36d5f5527850fac5d4e1267429777d60db7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=2E=20Mert=20Y=C4=B1ld=C4=B1ran?= <mehmet@up9.com>
Date: Wed, 17 Nov 2021 18:50:09 +0300
Subject: [PATCH] Prevent the crash on client-side in case of `text` being
 undefined in `FancyTextDisplay` (#481)

* Prevent the crash on client-side in case of `text` being undefined in `FancyTextDisplay`

* Use `String(text)` instead
---
 ui/src/components/UI/FancyTextDisplay.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/UI/FancyTextDisplay.tsx b/ui/src/components/UI/FancyTextDisplay.tsx
index 148e0d6bd..10dc49f1c 100644
--- a/ui/src/components/UI/FancyTextDisplay.tsx
+++ b/ui/src/components/UI/FancyTextDisplay.tsx
@@ -17,6 +17,7 @@ interface Props {
 const FancyTextDisplay: React.FC<Props> = ({text, className, isPossibleToCopy = true, applyTextEllipsis = true, flipped = false, useTooltip= false, displayIconOnMouseOver = false, buttonOnly = false}) => {
     const [showCopiedNotification, setCopied] = useState(false);
     const [showTooltip, setShowTooltip] = useState(false);
+    text = String(text);
 
     const onCopy = () => {
         setCopied(true)
@@ -47,7 +48,7 @@ const FancyTextDisplay: React.FC<Props> = ({text, className, isPossibleToCopy =
     return (
         <p
             className={`FancyTextDisplay-Container ${className ? className : ''} ${displayIconOnMouseOver ? 'displayIconOnMouseOver ' : ''} ${applyTextEllipsis ? ' FancyTextDisplay-ContainerEllipsis' : ''}`}
-            title={text.toString()}
+            title={text}
             onMouseOver={ e => setShowTooltip(true)}
             onMouseLeave={ e => setShowTooltip(false)}
         >