Error Converting a React Class Component to a Function Component

Question

I am trying to convert this demo into a function component. I am following these steps and I am stuck with the following:

Class version:

     this.appointmentForm = connectProps(AppointmentFormContainer, () => {
      const {
        editingFormVisible,
        editingAppointment,
        data,
        addedAppointment,
        isNewAppointment,
        previousAppointment,
      } = this.state;

Function conversion attempt:

const [appointmentForm, setappointmentForm] = useState({});


     setappointmentForm(connectProps(AppointmentFormContainer, () => {
      const {
        editingFormVisible,
        editingAppointment,
        data,
        addedAppointment,
        isNewAppointment,
        previousAppointment,
      };

The error with this version (tried several) is : "Parsing error: 'Const declarations' require an initialization value." it refers to the const in the line under the setappointmentForm but getting rid of it is incorrect as well. If the whole code is needed I will put it but it is quite long. Any ideas?

Answer 1

There's no right hand side to your const declaration. It's not legal javascript to do just this:

const foo;

You need to also give it a value, as in

const foo = "bar";

It looks like you're trying to do destructuring of a state object. In function components, it's common to split up your state instead of having it be in a single object, so you may not want to do this destructuring statement at all, but instead do independent states. For example:

const [editingFormVisible, setEditingFormVisible] = useState();
const [editingAppointment, setEditingAppointment] = useState();
const [data, setData] = useState();
// ... etc

If you don't want to split up the state and want to keep doing the destructuring assignment, then put the object to destructure on the right hand side.

const {
  editingFormVisible,
  editingAppointment,
  data,
  addedAppointment,
  isNewAppointment,
  previousAppointment,
} = someObject; // <------- added