TypeError: str.match is not a function

[Eddy Mackonade]

Hi all,

I am following the dashboard code sample from this URL: https://ej2.syncfusion.com/react/demos/?_ga=2.3960944.1770497451.1626917988-586964544.1625034816#/material/dashboard-layout/dynamic

I am also currently using the packages below:

    "@syncfusion/ej2-base": "^18.4.44",

    "@syncfusion/ej2-react-buttons": "^18.4.46",

    "@syncfusion/ej2-react-charts": "^19.2.47",

    "@syncfusion/ej2-react-dropdowns": "^18.4.48",

    "@syncfusion/ej2-react-grids": "^18.4.47",

    "@syncfusion/ej2-react-inputs": "^18.4.47",

    "@syncfusion/ej2-react-layouts": "^19.2.48",

    "@syncfusion/ej2-react-lists": "^18.4.39",

    "@syncfusion/ej2-react-popups": "^18.4.44",

    "@syncfusion/ej2-react-progressbar": "^18.4.39",

    "@syncfusion/ej2-react-splitbuttons": "^18.4.41",

    "react": "^17.0.1",

I encountered an error when I try to replace 'content' property with a JSX element as shown below:

const TestJSX = () => {

    return <button>save</button>;

};

const onAdd = (args: any) => {

let panel: PanelModel[] = [

{

id: 'p-' + Math.random(),

sizeX: 1,

sizeY: 1,

row: 0,

col: 0,

header: '

Line Chart

',

content: TestJSX as any,

},

];

dashboardObj?.addPanel(panel[0]);

};

TypeError: str.match is not a function

evalExp

C:/Users/ChongWeiWee/Documents/Projects/OTSiem-UI/node_modules/@syncfusion/ej2-layouts/node_modules/@syncfusion/ej2-base/src/template.js:73

70 | * Variable containing Local Keys

71 | */

72 | var localKeys = [];

> 73 | var isClass = str.match(/class="([^\"]+|)\s{2}/g);

| ^ 74 | var singleSpace = '';

75 | if (isClass) {

76 | isClass.forEach(function (value) {

To try and solve the issue, I have tried the steps below but the error persist:

1. npm cache clean --force
2. delete syncfusion folder
3. npm install
   
   

I would love to get some help on how to resolve this.

[Sharon Sanchez Selvaraj]

Hi Eddy, 

 

Greetings from Syncfusion Support. 

 

We checked with your code and have created a similar sample here for your reference. 

 

On a button click, we have added a single panel and have provided the content as a JSX element. However, we are unable to replicate the mentioned issue ”str.match”. 

 

Refer to the below code: 

 

  const onAdd = (args) => { 

    var panel = [ 

      { 

        id: "1", 

 

        sizeX: 1, 

 

        sizeY: 1, 

 

        row: 0, 

 

        col: 1, 

 

        header: "<div>Button component - 2</div>", 

        content: TestJSX 

      } 

    ]; 

 

    dashboardObj.current.addPanel(panel[0]); 

  }; 

 

 

Refer to the sample: 

 

https://codesandbox.io/s/react-dasboardlayout-as-functional-component-forked-g58ho 

 

Please get back to us if you need any further assistance. 

 

Regards, 

 

Sharon Sanchez S.