0

I have a following button which is connected to recaptcha according to docs

<Button
  onClick={() => setShowSpinner(true)}
  size="lg"
  className="g-recaptcha"
  data-sitekey="XYZ"
  data-callback="handleFormSend"
  data-action='submit'
>
  {showSpinner && <Spinner
    as="span"
    animation="grow"
    size="sm"
    role="status"
    aria-hidden="true"
  />}
  Send
</Button>

I don't understand why in chrome I got

"Warning: Did not expect server HTML to contain a <div> in <form>."

Of course I checked HTML code and don't see any div? In Mozilla there is no warning.

I use next and react.

What may be wrong?

juliomalves
  • 42,130
  • 20
  • 150
  • 146
SimonZ89
  • 147
  • 1
  • 9
  • The `Spinner` component probably renders as a `
    `. I have no idea why Next/React has a problem with that.
     – Heretic Monkey Jun 03 '22 at 20:25
  • 2
    Is this a Next.js app? This sounds like a SSR/hydration related issue. Can you show us the full code, including where the `form` element is used? – juliomalves Jun 03 '22 at 21:35
  • 1
    Does this answer your question? [React 16 warning "warning.js:36 Warning: Did not expect server HTML to contain a
    in
    ."](https://stackoverflow.com/questions/45350360/react-16-warning-warning-js36-warning-did-not-expect-server-html-to-contain-a)
     – JHBonarius Jun 04 '22 at 12:26

1 Answers1

0

Looks like a SSR/hydration issue. Try removing spaces between tags.

<Button
  onClick={() => setShowSpinner(true)}
  size="lg"
  className="g-recaptcha"
  data-sitekey="XYZ"
  data-callback="handleFormSend"
  data-action='submit'
>
  {showSpinner &&
    <Spinner
      as="span"
      animation="grow"
      size="sm"
      role="status"
      aria-hidden="true"
    />
  }
  Send
</Button>

Check this answer

Olcay Ertaş
  • 5,987
  • 8
  • 76
  • 112
faron
  • 1,051
  • 7
  • 9