Fix React warning "Use the defaultValue or value props instead of setting children on <textarea>"

Author: colinrotherham

src/components/form-elements/textarea/Textarea.tsx

@@ -6,16 +6,17 @@ import SingleInputFormGroup from '@components/utils/SingleInputFormGroup';
 type TextareaProps = HTMLProps<HTMLTextAreaElement> &
   FormElementProps & { textareaRef?: MutableRefObject<HTMLTextAreaElement | null> };
 
-const TextareaComponent: FC<TextareaProps> = ({ children, ...props }) => (
-  <SingleInputFormGroup<TextareaProps> inputType="textarea" {...props}>
-    {({ className, error, textareaRef, ...rest }) => (
-      <textarea
-        className={classNames('nhsuk-textarea', { 'nhsuk-textarea--error': error }, className)}
-        ref={textareaRef}
-        {...rest}
-      >
+const TextareaComponent: FC<TextareaProps> = (props) => (
+  <SingleInputFormGroup <TextareaProps> inputType="textarea" {...props}>
+    {({ children, className, error, textareaRef, ...rest }) => (
+      <>
+        <textarea
+          className={classNames('nhsuk-textarea', { 'nhsuk-textarea--error': error }, className)}
+          ref={textareaRef}
+          {...rest}
+        />
         {children}
-      </textarea>
+      </>
     )}
   </SingleInputFormGroup>
 );

stories/Form Elements/CharacterCount.stories.tsx

@@ -79,9 +79,15 @@ export const MessageThresholdPercentage: Story = {
       thresholdPercent={75}
     >
       <Label htmlFor="threshold">Can you provide more detail?</Label>
-      <Textarea id="threshold" className="nhsuk-js-character-count" name="threshold" rows={5}>
-        Type another letter into this field after this message to see the threshold feature
-      </Textarea>
+      <Textarea
+        id="threshold"
+        className="nhsuk-js-character-count"
+        name="threshold"
+        defaultValue={
+          'Type another letter into this field after this message to see the threshold feature'
+        }
+        rows={5}
+      />
     </CharacterCount>
   ),
 };