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,14 @@ import SingleInputFormGroup from '@components/utils/SingleInputFormGroup';
 type TextareaProps = HTMLProps<HTMLTextAreaElement> &
   FormElementProps & { textareaRef?: MutableRefObject<HTMLTextAreaElement | null> };
 
-const TextareaComponent: FC<TextareaProps> = ({ children, ...props }) => (
+const TextareaComponent: FC<TextareaProps> = (props) => (
   <SingleInputFormGroup<TextareaProps> inputType="textarea" {...props}>
     {({ 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>
   ),
 };