DevExtreme React - State Management

DevExtreme React components can operate in controlled and uncontrolled state management modes.

Controlled Mode

In controlled mode, the parent React component updates a DevExtreme component's state. It should pass new values to the DevExtreme component via properties, as with the value property of the TextBox component in the following code.

DevExtreme components raise events that you should handle to update the parent component's state (the onValueChanged handler in the code below). These events are raised only when a user interacts with the component, not when you update a property value programmatically.

App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import TextBox from 'devextreme-react/text-box';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text: 'TEXT'
        };

        this.handleValueChange = this.handleValueChange.bind(this);
    }

    render() {
        return (
            <div>
                <TextBox
                    value={this.state.text}
                    onValueChanged={this.handleValueChange}
                    valueChangeEvent="input"
                />
                <br />
                <div>{this.state.text}</div>
            </div>
        );
    }

    handleValueChange(e) {
        this.setState({
            text: e.value.toUpperCase()
        });
    }
}

export default App;

Uncontrolled Mode

In uncontrolled mode, DevExtreme components maintain and update their own state.

To specify an initial property value in this mode, add the default prefix to the property name. In the example below, the defaultCurrentDate attribute is used to define the currentDate property's initial value.

App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.compact.css';

import Scheduler from 'devextreme-react/scheduler';

const appointments = [{
    text: 'Website Re-Design Plan',
    startDate: new Date(2019, 4, 22, 9, 30),
    endDate: new Date(2019, 4, 22, 11, 30)
}, {
    text: 'Book Flights to San Fran for Sales Trip',
    startDate: new Date(2019, 4, 22, 12, 0),
    endDate: new Date(2019, 4, 22, 13, 0),
    allDay: true
}, {
    text: 'Install New Router in Dev Room',
    startDate: new Date(2019, 4, 23, 10, 30),
    endDate: new Date(2019, 4, 23, 16, 30)
}];

class App extends React.Component {
    render() {
        return (
            <Scheduler
                dataSource={appointments}
                height={600}
                editing={false}
                defaultCurrentDate={new Date(2019, 4, 22)}
                startDayHour={9}
            />
        );
    }
}

export default App;