🧹 Fix some React dom validation warnings (#4845)

Fix some React dom validation warnings
Joystream · May 1, 2024 · 167a71c · 167a71c
1 parent 0aa19fa
commit 167a71c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/packages/ui/src/accounts/modals/TransferModal/TransferSignModal.tsx b/packages/ui/src/accounts/modals/TransferModal/TransferSignModal.tsx
@@ -65,7 +65,7 @@ export function TransferSignModal({ onClose, from, amount, to, service, transact
       <ModalBody>
         <SignTransferContainer>
           <Row>
-            <TextMedium margin="xl">
+            <TextMedium margin="xl" as="div">
               You are transferring <TokenValue value={amount} /> stake from “{from.name}” account to “{to.name}”{' '}
               destination.
             </TextMedium>

diff --git a/packages/ui/src/common/components/Stepper/HorizontalStepper.tsx b/packages/ui/src/common/components/Stepper/HorizontalStepper.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import styled, { css } from 'styled-components'
 
 import { asStepsToRender, StepperStep, StepToRender } from '@/common/components/Stepper/types'
@@ -16,15 +16,15 @@ export const HorizontalStepper = ({ steps }: HorizontalStepperProps) => {
   return (
     <HorizontalStepperWrapper>
       {stepsToRender.map((step, index) => (
-        <>
-          <Step step={step} key={`horizontal-stepper-${index}`}>
+        <Fragment key={`horizontal-stepper-${index}`}>
+          <Step step={step}>
             <StepCircle>{step.isPast ? <CheckboxIcon /> : index + 1}</StepCircle>
             <StepBody>
               <StepTitle>{step.title}</StepTitle>
             </StepBody>
           </Step>
           {index < stepsToRender.length - 1 && <Separator />}
-        </>
+        </Fragment>
       ))}
     </HorizontalStepperWrapper>
   )