Is it worth it to change generated form code to be functional react instead of class based?

[jackbravo]

Recently I changed the code on a local project to use functional form elements instead of class based, and found it much easier to read. I'm a complete newbie with React. Would it be worth it to change our templates? Why are we used class based instead of functional React, I ask because most new examples and tutorials I see recommend using functional code.

This was the final result:

import { PropsWithoutRef } from "react"
import { Field } from "react-final-form"
import FieldError from "./FieldError"

interface LabeledTextFieldProps extends PropsWithoutRef<JSX.IntrinsicElements["input"]> {
  name: string
  label: string
  /** Field type. Doesn't include radio buttons and checkboxes */
  type?: "text" | "password" | "email" | "number"
  outerProps?: PropsWithoutRef<JSX.IntrinsicElements["div"]>
}

export function LabeledTextField({
  name,
  label,
  type,
  outerProps,
  ...props
}: LabeledTextFieldProps) {
  return (
    <Field name={name}>
      {({ input, meta: { submitting } }) => (
        <div {...outerProps}>
          <label>
            {label}
            <input {...input} type={type} disabled={submitting} {...props} />
          </label>

          <FieldError name={name} />

          <style jsx>{`
            label {
              display: flex;
              flex-direction: column;
              align-items: start;
              font-size: 1rem;
            }
            input {
              font-size: 1rem;
              padding: 0.25rem 0.5rem;
              border-radius: 3px;
              border: 1px solid purple;
              appearance: none;
              margin-top: 0.5rem;
            }
          `}</style>
        </div>
      )}
    </Field>
  )
}

export default LabeledTextField

[flybayer]

I think all the blitz templates use function components instead of class components. Did you find one that is a class component?