We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Simply setting the state Breaks the components

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.

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.

3 Replies

KR Keerthana Rajendran Syncfusion Team December 12, 2019 12:53 PM UTC

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 2nd 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 

UN Unknown Syncfusion Team August 28, 2020 08:55 AM UTC

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

MK Muthukrishnan Kandasamy Syncfusion Team August 31, 2020 05:46 AM UTC

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. 
Please let us know, if you need any further assistance. 
Muthukrishnan K 

Live Chat Icon For mobile
Up arrow icon