From cbf8e8e49fc5d43a8818cf41010cfba6034bbf28 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Mon, 18 Sep 2023 15:08:45 +0100
Subject: [PATCH] fix: ensure hooks can always be used within render functions

---
 packages/core/components/Puck/index.tsx | 26 ++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
index c1a3000564..6718819e6a 100644
--- a/packages/core/components/Puck/index.tsx
+++ b/packages/core/components/Puck/index.tsx
@@ -371,6 +371,14 @@ export function Puck({
                       id="puck-drop-zone"
                     >
                       {data.content.map((item, i) => {
+                        const Render = config.components[item.type]
+                          ? config.components[item.type].render
+                          : () => (
+                              <div style={{ padding: 48, textAlign: "center" }}>
+                                No configuration for {item.type}
+                              </div>
+                            );
+
                         return (
                           <DraggableComponent
                             key={item.props.id}
@@ -411,19 +419,11 @@ export function Puck({
                             }}
                           >
                             <div style={{ zoom: 0.75 }}>
-                              {config.components[item.type] ? (
-                                config.components[item.type].render({
-                                  ...config.components[item.type].defaultProps,
-                                  ...item.props,
-                                  editMode: true,
-                                })
-                              ) : (
-                                <div
-                                  style={{ padding: 48, textAlign: "center" }}
-                                >
-                                  No configuration for {item.type}
-                                </div>
-                              )}
+                              <Render
+                                {...config.components[item.type]?.defaultProps}
+                                {...item.props}
+                                editMode={true}
+                              />
                             </div>
                           </DraggableComponent>
                         );