fix: empty component blocks

ccontrols · Apr 1, 2020 · 5c9108b · 5c9108b
1 parent a496da3
commit 5c9108b
Showing 1 changed file with 11 additions and 6 deletions.
diff --git a/ui/blocks/src/BlockContainer/components/ComponentsBlockContainer.tsx b/ui/blocks/src/BlockContainer/components/ComponentsBlockContainer.tsx
@@ -19,23 +19,23 @@ export const ComponentsBlockContainer: FC<ComponentsBlockContainerProps> = ({
   id,
   of,
   children,
-  sx,
+  sxStyle,
   ...rest
 }) => {
   const [title, setTitle] = React.useState<string | undefined>();
   const { components } = useComponentsContext({ of });
   const componentNames = Object.keys(components);
-  if (!componentNames.length) {
-    //no components to display
-    return null;
-  }
   React.useEffect(() => {
     setTitle(
       userTitle === CURRENT_STORY && componentNames.length
         ? getComponentName(components[componentNames[0]])
         : userTitle,
     );
   }, [userTitle]);
+  if (!componentNames.length) {
+    //no components to display
+    return null;
+  }
   const block = (
     <ComponentsContainer
       of={of}
@@ -48,7 +48,12 @@ export const ComponentsBlockContainer: FC<ComponentsBlockContainerProps> = ({
     </ComponentsContainer>
   );
   return (
-    <BlockContainer title={title} collapsible={collapsible} id={id} sx={sx}>
+    <BlockContainer
+      title={title}
+      collapsible={collapsible}
+      id={id}
+      sxStyle={sxStyle}
+    >
       {block}
     </BlockContainer>
   );