Bug: Hydration error due to <button>

[JAGADEESHWARAN20]

React version:

is there any way to fix this issue

Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error

In HTML, cannot be a descendant of . This will cause a hydration error.

                          <button>
                          ^^^^^^^^
                            <_c>
                              <button>
                              ^^^^^^^^

Link to code example:

https://github.com/JAGADEESHWARAN20/Shopwithdashboard/blob/main/app/(dashboard)/%5BstoreId%5D/(routes)/settings/components/SettingsForm.tsx

[JAGADEESHWARAN20]

i tried So many time to find this issue , but I don't get it ....

screenshot:

how to remove this also

[pwbriggs]

Hey @JAGADEESHWARAN20 👋

I'm not an expert on Next.js, but it looks like this error is caused by nesting two interactive <button>s. That is, you have a button within another button.

Hope this helps!

[muskan2622]

@JAGADEESHWARAN20 How did you run this project? using yarn test?

[JAGADEESHWARAN20]

Using npm run dev

[dmx1254]

The error is present because you have nested two buttons because the generated html code will render two buttons side by side whereas during hydration the buttons are nested.

[rickhanlonii]

Yeah nesting buttons is invalid HTML.