Write object to state

Question

It is necessary by clicking on register to transfer the object with the filled fields to state dataChanged

https://codesandbox.io/s/validation-devextreme-form-fso31

The problem is in the onFieldDataChanged property when setting the dataChanged state. Error:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops

<Form
            formData={customer}
            readOnly={false}
            showColonAfterLabel={true}
            showValidationSummary={true}
            validationGroup="customerData"
            onFieldDataChanged={e => {
              let newData = e.component.option("formData");
              this.setState({
                dataChanged: newData
              });
            }}
>

Answer 1

Instead of calling setState in an arrow function as prop, create a function like this:

onFieldChangeHandler = (e) => {
    const newData = e.component.option("formData");
    this.setState({
        dataChanged: newData
    });
}

And in your Form component's props:

onFieldDataChanged={this.onFieldChangeHandler}