Changing state variable in actionFailure-event crashes edit dialog

Question

Hi,I want to change the value of a state-variable when an error occurs (actionFailure event gets hit), however this crashes my edit dialog window (see following screenshot).The following code snippet of the attached demo code produces the crash:const [showError, setShowError] = React.useState(false);  const actionFailure = args => {    console.log(args);    setShowError(true); //--- HERE  };I have attached a demo file to reproduce the error. Just start edit a record of the grid and click on save. The actionFailure event changes the value of the state variable and in this moment the edit dialog crashes.Any ideas?Attachment: Demo_3f6ce5ea.zip

Ajith Govarthan · Accepted Answer

Hi Laurin, 

Thanks for contacting Syncfusion support. 

Query: I want to change the value of a state-variable when an error occurs (actionFailure event gets hit), however this crashes my edit dialog window (see following screenshot). 
 
By default, React components are automatically re-rendered based on the state value change. In this cause, Grid component is also forced to re-render. So the Grid previous state neglect in this process. So, when you perform CRUD actions, we suggest you complete the CRUD action or cancel it before you are changing the state variable in your Grid application. 

For your convenience we have attached the sample, please refer them for your reference. 

Code Example: 




Index.js 

  const actionFailure = args => { 
    console.log(args); 
    grid.closeEdit();  // as the edit operation failed, we have closed the dialog before changing the sate variable 
    setShowError(true); 
  }; 


Sample Link: https://stackblitz.com/edit/react-joxk2x-pb8kba?file=index.js 

Note: in the above sample the API service is not handled the CRUD service in the server side. So, the actionFailure event is triggered when you tried to save the record. 

Please get back to us if you need further assistance. 

Regards, 
Ajith G.