Transform Function Component -> Class Component

Question

How to transform this function complement to class component :

const SyncValidationForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form className ="formmailforbook" onSubmit={handleSubmit(submit)}>

      <Field name="email" type="email" component={renderField} label="Email"/>
      <div>
        <button className ="hero_button margin_left" type="submit" disabled={submitting}>Submit</button>
      </div>
    </form>
  )
}

Answer 1

Pretty easy translation, you can do the same prop destructuring in the render method. Only slight change is that now it's pulling from this.props:

import React, { Component } from 'react';

export default class SyncValidationForm extends Component {
  render () {
    const { handleSubmit, pristine, reset, submitting } = this.props;
    return (
      <form className ="formmailforbook" onSubmit={handleSubmit(submit)}>

        <Field name="email" type="email" component={renderField} label="Email"/>
        <div>
          <button className ="hero_button margin_left" type="submit" disabled={submitting}>Submit</button>
        </div>

      </form>
    )
  }
}