title: React converting class into function component issues
body: <p>I am trying to use <a href="https://devexpress.github.io/devextreme-reactive/react/scheduler/docs/guides/editing/" rel="nofollow noreferrer">React Scheduler</a> with my shifts database. The current state after trying to use hooks instead of class is that I cannot edit any field in the form. I have deleted some of the code to make it cleaner, for now I am trying only to add a shift.</p>
  <p><strong>React Scheduler original code:</strong></p>
  <pre><code>import * as React from 'react';
  import Paper from '@material-ui/core/Paper';
  import { ViewState, EditingState } from '@devexpress/dx-react-scheduler';
  import {
    Scheduler,
    Appointments,
    AppointmentForm,
    AppointmentTooltip,
    WeekView,
  } from '@devexpress/dx-react-scheduler-material-ui';
  import { appointments } from '../../../demo-data/appointments';
  
  export default class Demo extends React.PureComponent {
    constructor(props) {
      super(props);
      this.state = {
        data: appointments,
        currentDate: '2018-06-27',
        addedAppointment: {},
        appointmentChanges: {},
        editingAppointment: undefined,
      };
  
      this.commitChanges = this.commitChanges.bind(this);
      this.changeAddedAppointment = this.changeAddedAppointment.bind(this);
      this.changeAppointmentChanges = this.changeAppointmentChanges.bind(this);
      this.changeEditingAppointment = this.changeEditingAppointment.bind(this);
    }
  
    changeAddedAppointment(addedAppointment) {
      this.setState({ addedAppointment });
    }
  
    changeAppointmentChanges(appointmentChanges) {
      this.setState({ appointmentChanges });
    }
  
    changeEditingAppointment(editingAppointment) {
      this.setState({ editingAppointment });
    }
  
    commitChanges({ added, changed, deleted }) {
      this.setState((state) =&gt; {
        let { data } = state;
        if (added) {
          const startingAddedId = data.length &gt; 0 ? data[data.length - 1].id + 1 : 0;
          data = [...data, { id: startingAddedId, ...added }];
        }
        return { data };
      });
    }
  
    render() {
      const {
        currentDate, data, addedAppointment, appointmentChanges, editingAppointment,
      } = this.state;
  
      return (
        &lt;Paper&gt;
          &lt;Scheduler
            data={data}
            height={660}
          &gt;
            &lt;ViewState
              currentDate={currentDate}
            /&gt;
            &lt;EditingState
              onCommitChanges={this.commitChanges}
              addedAppointment={addedAppointment}
              onAddedAppointmentChange={this.changeAddedAppointment}
              appointmentChanges={appointmentChanges}
              onAppointmentChangesChange={this.changeAppointmentChanges}
              editingAppointment={editingAppointment}
              onEditingAppointmentChange={this.changeEditingAppointment}
            /&gt;
            &lt;WeekView
              startDayHour={9}
              endDayHour={17}
            /&gt;
            &lt;Appointments /&gt;
            &lt;AppointmentTooltip
              showOpenButton
              showDeleteButton
            /&gt;
            &lt;AppointmentForm /&gt;
          &lt;/Scheduler&gt;
        &lt;/Paper&gt;
      );
    }
  }
  </code></pre>
  <p><strong>My function component code:</strong></p>
  <pre><code>import React, { useState } from 'react';
  import Paper from '@material-ui/core/Paper';
  import { ViewState, EditingState } from '@devexpress/dx-react-scheduler';
  import {
    Scheduler,
    Appointments,
    AppointmentForm,
    AppointmentTooltip,
    WeekView,
    ConfirmationDialog,
  } from '@devexpress/dx-react-scheduler-material-ui';
    
  const DataSheet = ( { addShift, shifts, deleteShift } ) =&gt; {
      const [data, setData] = useState(shifts)
      const [currentDate, setCurrentDate] = useState('2018-06-27')
      const [addedAppointment, setAddedAppointment] = useState({})
      const [appointmentChanges, setAppointmentChanges] = useState({})
      const [editingAppointment, setEditingAppointment] = useState(undefined)
    
      const changeAddedAppointment = (addedAppointment) =&gt; {
          setAddedAppointment({ addedAppointment });
      }
  
      const changeAppointmentChanges = (appointmentChanges) =&gt; {
          setAppointmentChanges({ appointmentChanges });
      }
  
      const changeEditingAppointment = (editingAppointment) =&gt; {
          setEditingAppointment({ editingAppointment });
      }
  
      const commitChanges = ({ added, changed, deleted }) =&gt; {
      setData ((????) =&gt; {
        let { data } = data;
        console.log(data);  //returns undefined
        if (added) {
          const startingAddedId = data &gt; 0 ? data[data.length - 1].id + 1 : 0;  
          data = [...data, { id: startingAddedId, ...added }];
          addShift(added);
        }
        return { data };
      });
    }
  
      return (
        &lt;Paper&gt;
          &lt;Scheduler
            data={data}
            height={660}
          &gt;
            &lt;ViewState
              currentDate={currentDate}
            /&gt;
            &lt;EditingState
              onCommitChanges={commitChanges}
              addedAppointment={addedAppointment}
              onAddedAppointmentChange={changeAddedAppointment}
              appointmentChanges={appointmentChanges}
              onAppointmentChangesChange={changeAppointmentChanges}
              editingAppointment={editingAppointment}
              onEditingAppointmentChange={changeEditingAppointment}
            /&gt;
            &lt;WeekView
              startDayHour={9}
              endDayHour={17}
            /&gt;
            &lt;Appointments /&gt;
            &lt;AppointmentTooltip
              showOpenButton
              showDeleteButton
            /&gt;
            &lt;AppointmentForm /&gt;
          &lt;/Scheduler&gt;
        &lt;/Paper&gt;
      );
  }
  
  export default DataSheet
  </code></pre>
  <p><strong>App.js:</strong></p>
  <pre><code>import React from 'react';
  import backgroundImage from './Resources/BennyBackground.jpeg'
  import Header from &quot;./components/Header&quot;;
  import { useState, useEffect } from &quot;react&quot;
  import DataSheet from './components/DataSheet';
  
  const containerStyle= {
    width: '100vw',
    height: '100vh',
    backgroundImage: `url(${backgroundImage})`,
    backgroundPosition: 'center',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
  }
  
  const App = () =&gt; {
    const [shifts, setShifts] = useState([])
    useEffect(() =&gt; {
      const getShifts = async () =&gt; {
        const shiftsFromServer = await fetchShifts()
        setShifts(shiftsFromServer)
      }
      getShifts()
    }, [])
  
    const fetchShifts = async () =&gt; {
      const res = await fetch(`http://localhost:5000/shifts/`)
      const data = await res.json()
      return data
    }
  
  const addShift = async (shift) =&gt; {
    const startingAddedId = shifts.length &gt; 0 ? shifts[shifts.length - 1].id + 1 : 0;
    shift.id = startingAddedId;
    const res = await fetch(`http://localhost:5000/shifts/`,{
      method: 'POST',
      headers: {
        'Content-type': 'application/json'
      },
      body: JSON.stringify(shift)
    })
  
    const data = await res.json()
  
    setShifts([...shifts, data])
  } 
  
    return (
      &lt;div className=&quot;container&quot;
      style={containerStyle} &gt;
        &lt;div className='secondary_container'&gt;
          &lt;Header /&gt;
          &lt;DataSheet shifts={shifts} addShift={addShift}/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>I know it is a lot of code and a lot to ask and I would highly appreciate help with this.</p>