LabeledField(part2): refactor to a function component (#2338)

## Summary:
Refactoring the LabeledField component to a function component.

The LabeledField is based on the FieldHeading component and will be updated in more PRs to meet the implementation spec

Issue: WB-1503

## Test plan:
Confirm tests still pass and component looks and functions the same way

Author: beaesguerra

Reviewers: jandrade

Required Reviewers:

Approved By: jandrade

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Lint (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2338

.changeset/big-starfishes-worry.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-labeled-field": patch
+---
+
+LabeledField: Refactor from class component to function component

packages/wonder-blocks-labeled-field/src/components/labeled-field.tsx

@@ -54,10 +54,20 @@ const StyledSpan = addStyle("span");
  * A LabeledField is an element that provides a label, description, and error element
  * to present better context and hints to any type of form field component.
  */
-export default class LabeledField extends React.Component<Props> {
-    renderLabel(): React.ReactNode {
-        const {label, id, required, testId, light} = this.props;
+export default function LabeledField(props: Props) {
+    const {
+        field,
+        style,
+        label,
+        id,
+        required,
+        testId,
+        light,
+        description,
+        error,
+    } = props;
 
+    function renderLabel(): React.ReactNode {
         const requiredIcon = (
             <StyledSpan
                 style={light ? styles.lightRequired : styles.required}
@@ -84,9 +94,7 @@ export default class LabeledField extends React.Component<Props> {
         );
     }
 
-    maybeRenderDescription(): React.ReactNode | null | undefined {
-        const {description, testId, light} = this.props;
-
+    function maybeRenderDescription(): React.ReactNode | null | undefined {
         if (!description) {
             return null;
         }
@@ -104,9 +112,7 @@ export default class LabeledField extends React.Component<Props> {
         );
     }
 
-    maybeRenderError(): React.ReactNode | null | undefined {
-        const {error, id, testId, light} = this.props;
-
+    function maybeRenderError(): React.ReactNode | null | undefined {
         if (!error) {
             return null;
         }
@@ -126,19 +132,15 @@ export default class LabeledField extends React.Component<Props> {
         );
     }
 
-    render(): React.ReactNode {
-        const {field, style} = this.props;
-
-        return (
-            <View style={style}>
-                {this.renderLabel()}
-                {this.maybeRenderDescription()}
-                <Strut size={spacing.xSmall_8} />
-                {field}
-                {this.maybeRenderError()}
-            </View>
-        );
-    }
+    return (
+        <View style={style}>
+            {renderLabel()}
+            {maybeRenderDescription()}
+            <Strut size={spacing.xSmall_8} />
+            {field}
+            {maybeRenderError()}
+        </View>
+    );
 }
 
 const styles = StyleSheet.create({