[sitecore-jss-react] Fix rendering issue in components using withPlaceholder

packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx

@@ -172,6 +172,7 @@ export class PlaceholderCommon<T extends PlaceholderProps> extends React.Compone
   }
 
   getSXAParams(rendering: ComponentRendering) {
+    if (!rendering.params) return {};
     return (
       rendering.params.FieldNames && {
         styles: `${rendering.params.GridParameters || ''} ${rendering.params.Styles || ''}`,

packages/sitecore-jss-react/src/enhancers/withPlaceholder.test.tsx

@@ -5,7 +5,9 @@
 import React, { ReactElement } from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
-import { altData, convertedDevData as nonEeDevData } from '../test-data/non-ee-data';
+import { convertedDevData as nonEeDevData } from '../test-data/non-ee-data';
+import { convertedDevDataWithoutParams as nonEeDevDataWithoutParams } from '../test-data/non-ee-data';
+import { convertedDataWithoutParams as eeDataWithoutParams } from '../test-data/ee-data';
 import { convertedData as eeData } from '../test-data/ee-data';
 import { withPlaceholder } from '../enhancers/withPlaceholder';
 import { SitecoreContext } from '../components/SitecoreContext';
@@ -91,6 +93,11 @@ const testData = [
   { label: 'LayoutService data - EE on', data: eeData },
 ];
 
+const testDataWithoutParams = [
+  { label: 'Dev data without params', data: nonEeDevDataWithoutParams },
+  { label: 'LayoutService data - EE on without params', data: eeDataWithoutParams },
+];
+
 describe('withPlaceholder HOC', () => {
   describe('Error handling', () => {
     it('should render default error component on wrapped component error', () => {
@@ -193,4 +200,29 @@ describe('withPlaceholder HOC', () => {
       });
     });
   });
+
+  testDataWithoutParams.forEach((dataSet) => {
+    describe(`with ${dataSet.label}`, () => {
+      it('should render a placeholder with given key when params are not passed', () => {
+        const component = (dataSet.data.sitecore.route.placeholders.main as (
+          | ComponentRendering
+          | RouteData
+        )[]).find((c) => (c as ComponentRendering).componentName);
+        const phKey = 'page-content';
+        const props: PlaceholderProps = {
+          name: phKey,
+          rendering: component,
+          params: { test: 'test' },
+          componentFactory: componentFactory,
+        };
+        const Element = withPlaceholder(phKey)(Home);
+        const renderedComponent = mount(
+          <SitecoreContext componentFactory={componentFactory}>
+            <Element {...props} />
+          </SitecoreContext>
+        );
+        expect(renderedComponent.find('.download-callout-mock').length).to.equal(1);
+      });
+    });
+  });
 });