fix: ensure hooks can always be used within render functions

measuredco · Sep 18, 2023 · cbf8e8e · cbf8e8e
1 parent b89feef
commit cbf8e8e
Showing 1 changed file with 13 additions and 13 deletions.
diff --git 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>
                         );