From 6c88ec320843b1cfa461539c77592251db7d06cb Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Fri, 5 Feb 2021 17:41:15 +0200
Subject: Toggle visibility instead returning null when no error should be
 shown

---
 src/components/ErrorMessage.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

(limited to 'src/components/ErrorMessage.tsx')

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index 982bdb9..3342434 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -7,17 +7,14 @@ interface ErrorMessageProps {
     message: string
 }
 
-const styles = css`
-  color: ${colors.error};
-  font-size: 1.15rem;
-  line-height: 1.1rem;
-  margin: 1rem 0 0;
-`;
-
 export default function ErrorMessage(props: ErrorMessageProps): JSX.Element | null {
-    if (!props.show) {
-        return null;
-    }
+    const styles = css`
+      color: ${colors.error};
+      font-size: 1.15rem;
+      line-height: 1.1rem;
+      margin: 1rem 0 0;
+      visibilty: ${props.show ? "visible" : "hidden"}
+    `;
 
     return (
         <p css={styles}>{props.message}</p>
-- 
cgit v1.2.3

