Simply setting the state Breaks the components

[Mike Saar]

As simple as the subject says... after pulling my hair our the past 24 hours... I have discovered that doing one of the most common actions in react "setting the state" seems to break any custom component widget used in the Dashboard Layout.... making it completely useless.

I was easily able to replicate this in your online demo by forking the StackBlitz.

https://stackblitz.com/edit/react-dqoscs 

I simple added a new property to the state called "myProperty:false" and when the component Mounts I am setting it to true with setState({myPropety:true})

As you can see the custom components (aka the charts) are now gone and broken.

Also... can someone please explain why there are so many manual dom manipulations happening? This code unfortunately SCREAMS that the developer who wrote it doesn't like React or like using the normal paradigms. Adding manual click listeners to elements queried by ID completely goes against the PURPOSE of react.

This was the main component that had our company interested in using SyncFusion. We shall look elsewhere.

[Keerthana Rajendran]

Hi Mike, 

 

We regret for the inconvenience. 

 

  

We have considered the reported issue “Setting state before the component render breaks component template” as a bug in our end and the fix will be included in our 2^nd patch release  which is expected to be rolled out by the end of December. We appreciate your patience until then and you can track the status from the below feedback link 

 

https://www.syncfusion.com/feedback/10719/setting-the-state-before-the-components-render-breaks-the-component-template  

 

  

Regards, 

Keerthana. 

[Unknown]

Is this issue has been resolved yet, as I am stuck in the same issue

[Muthukrishnan Kandasamy]

 

Hi Nikita, 

 

Thanks for contacting Syncfusion support. 

 

We have already fixed the reported problem in Syncfusion React components in Volume 1 release of 2020 with release version (18.1.42). To resolve your reported problem, update the Syncfusion packages of your application into the latest version. We have prepared sample for your convenience with the solution. Please refer to the below link for the sample. 

 

https://stackblitz.com/edit/react-editable-dashboard?file=index.js 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Muthukrishnan K