DevExtreme React - State Management

React.js offers two ways to access and influence your components' state and content.

Components that use the controlled state management mode delegate data storage and state management to other entities. Such components use props to receive data from their parents, and callbacks to notify their parent of state updates. The official React documentation recommends this technique for most users.

Components that use the uncontrolled state management mode are self-contained. Like traditional HTML, they store data directly inside the DOM. You can use refs to access this data.

To manage the state of a controlled component, use the component's props. In the example below, the parent of the TextBox component determines the value property of its child.

DevExtreme components raise events in response to user interaction. The names of these events include the name of the property that changed. For example, when the user changes the value property, the component raises the onValueChange event. The handler for this event accepts the new property value as a parameter.

Handle component events to update the parent component's state. Note: components don't fire events when you update component data programmatically.

import React, { useState } from 'react';
import 'devextreme/dist/css/dx.light.css';
import TextBox from 'devextreme-react/text-box';

const App = () => {
const [text, setText] = useState('TEXT');

const handleValueChange = (value) => {
    setText(value.toUpperCase());
};

return (
    <div>
    <TextBox
        value={text}
        onValueChange={handleValueChange}
        valueChangeEvent="input"
    />
    <br />
    <div>{text}</div>
    </div>
);
};

export default App;

Uncontrolled 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 defines the initial value of the currentDate property.

import React from 'react';
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),
    },
];

const App = () => {
    return (
        <Scheduler
        dataSource={Appointments}
        height={600}
        editing={false}
        defaultCurrentDate={new Date(2019, 4, 22)}
        currentDate={new Date(2019, 4, 22)}
        startDayHour={9}
        />
    );
};

export default App;