Converting Class Component to Function Component

Question

I'm new to React and I'm trying to incorporate viewSwitching from https://devexpress.github.io/devextreme-reactive/react/scheduler/docs/guides/view-switching/ into my project. The issue I'm facing is that this view has class components and I've written my code in functional components, is there any way to implement the code given below into functional components so that viewSwitching may work?

import * as React from 'react';
import Paper from '@material-ui/core/Paper';
import { ViewState } from '@devexpress/dx-react-scheduler';
import {
  Scheduler,
  WeekView,
  Appointments,
  Toolbar,
  ViewSwitcher,
  MonthView,
  DayView,
} from '@devexpress/dx-react-scheduler-material-ui';

import { appointments } from '../../../demo-data/month-appointments';

export default class Demo extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      data: appointments,
      currentViewName: 'work-week',
    };
    this.currentViewNameChange = (currentViewName) => {
      this.setState({ currentViewName });
    };
  }

  render() {
    const { data, currentViewName } = this.state;

    return (
      <Paper>
        <Scheduler
          data={data}
          height={660}
        >
          <ViewState
            defaultCurrentDate="2018-07-25"
            currentViewName={currentViewName}
            onCurrentViewNameChange={this.currentViewNameChange}
          />

          <WeekView
            startDayHour={10}
            endDayHour={19}
          />
          <WeekView
            name="work-week"
            displayName="Work Week"
            excludedDays={[0, 6]}
            startDayHour={9}
            endDayHour={19}
          />
          <MonthView />
          <DayView />

          <Toolbar />
          <ViewSwitcher />
          <Appointments />
        </Scheduler>
      </Paper>
    );
  }
}

Any help at all will be appreciated :)

score 1 · Answer 1 · answered Aug 27 '21 at 01:25

import * as React from 'react';
import Paper from '@material-ui/core/Paper';
import { ViewState } from '@devexpress/dx-react-scheduler';
import {
  Scheduler,
  WeekView,
  Appointments,
  Toolbar,
  ViewSwitcher,
  MonthView,
  DayView,
} from '@devexpress/dx-react-scheduler-material-ui';

import { appointments } from '../../../demo-data/month-appointments';

const Demo = () => {
  const [state, setState] = useState({
    data: appointments,
    currentViewName: 'work-week'
  })

  const currentViewNameChange = (currentViewName) => {
    setState({ currentViewName });
  };
   

    return (
      <Paper>
        <Scheduler
          data={state.data}
          height={660}
        >
          <ViewState
            defaultCurrentDate="2018-07-25"
            currentViewName={state.currentViewName}
            onCurrentViewNameChange={currentViewNameChange}
          />

          <WeekView
            startDayHour={10}
            endDayHour={19}
          />
          <WeekView
            name="work-week"
            displayName="Work Week"
            excludedDays={[0, 6]}
            startDayHour={9}
            endDayHour={19}
          />
          <MonthView />
          <DayView />

          <Toolbar />
          <ViewSwitcher />
          <Appointments />
        </Scheduler>
      </Paper>
    );
}

export default Demo;

score 0 · Answer 2 · answered Aug 27 '21 at 01:24

Just update state and function like this

const Demo = (props) => {
  const [data, useData] = useState(appointments);
  const [currentViewName, setCurrentViewName] = useState("work-week");
  const currentViewNameChange = (currentViewName) => {
    setCurrentViewName(currentViewName);
  };

  return (
    <Paper>
      <Scheduler data={data} height={660}>
        <ViewState
          defaultCurrentDate="2018-07-25"
          currentViewName={currentViewName}
          onCurrentViewNameChange={currentViewNameChange}
        />

        <WeekView startDayHour={10} endDayHour={19} />
        <WeekView
          name="work-week"
          displayName="Work Week"
          excludedDays={[0, 6]}
          startDayHour={9}
          endDayHour={19}
        />
        <MonthView />
        <DayView />

        <Toolbar />
        <ViewSwitcher />
        <Appointments />
      </Scheduler>
    </Paper>
  );
};

Converting Class Component to Function Component

2 Answers2