From 245283ab7f54b74387d908b27cf4b6cf22b92d6e Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 21 Jun 2023 10:29:04 +0100
Subject: [PATCH] Changed 24

---
 ...minated-union-with-other-props.problem.tsx | 26 +++++++++++++++++--
 ...inated-union-with-other-props.solution.tsx | 26 +++++++++++++++++--
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx b/src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx
index 7b30253..358bc67 100644
--- a/src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx
+++ b/src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx
@@ -13,9 +13,31 @@ type ModalProps =
  */
 export const Modal = (props: ModalProps) => {
   if (props.variant === "no-title") {
-    return <div>No title</div>;
+    return (
+      <div>
+        <span>No title</span>
+        <button
+          style={{
+            backgroundColor: props.buttonColor,
+          }}
+        >
+          Click me!
+        </button>
+      </div>
+    );
   } else {
-    return <div>Title: {props.title}</div>;
+    return (
+      <div>
+        <span>Title: {props.title}</span>
+        <button
+          style={{
+            backgroundColor: props.buttonColor,
+          }}
+        >
+          Click me!
+        </button>
+      </div>
+    );
   }
 };
 
diff --git a/src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx b/src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx
index dbc04c4..942479a 100644
--- a/src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx
+++ b/src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx
@@ -17,9 +17,31 @@ type ModalProps = (
 
 export const Modal = (props: ModalProps) => {
   if (props.variant === "no-title") {
-    return <div>No title</div>;
+    return (
+      <div>
+        <span>No title</span>
+        <button
+          style={{
+            backgroundColor: props.buttonColor,
+          }}
+        >
+          Click me!
+        </button>
+      </div>
+    );
   } else {
-    return <div>Title: {props.title}</div>;
+    return (
+      <div>
+        <span>Title: {props.title}</span>
+        <button
+          style={{
+            backgroundColor: props.buttonColor,
+          }}
+        >
+          Click me!
+        </button>
+      </div>
+    );
   }
 };