Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

warning.js:33 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

See original GitHub issue

warning.js:33 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
    in button (created by Title)
    in CopyToClipboard (created by Title)
    in div (created by Title)
    in Title
    in button (created by DownPanel)
    in div (created by DownPanel)
    in div (created by DownPanel)
    in DownPanel (created by Container(DownPanel))
    in Container(DownPanel) (created by Layout)
    in div (created by Layout)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by Layout)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by Layout)
    in div (created by Layout)
    in Layout (created by Container(Layout))
    in Container(Layout)
    in div

This happens because of nested <button>:

Issue Analytics

State:
Created 6 years ago
Reactions:5
Comments:6 (2 by maintainers)

Top GitHub Comments

10reactions

mattcolmancommented, Sep 10, 2018

I thought nested buttons were ok. Isn’t that the point of event propagation? By default you can click both buttons unless you call event.stopPropagation() on the child event?

3reactions

AdnanBootacommented, Jul 11, 2019

Any fix for this, i’m also using <ButtonGroup> with “reactstrap”: “^6.5.0”, and still getting this warning?

Any solution to fix?

Thanks, Adnan

Top Results From Across the Web

<button> cannot appear as a descendant of ... - Stack Overflow

In your App the Fab component is already nested in a Button ... to remove the top level Button component and use onClick...

Warning: validateDOMNesting(...): <button> cannot appear as ...

I wrapped a component that is by another component. Essentially a StyledButton within a Button. const StyledButton = styled(Button) Below is ...

button cannot appear as a descendant of button

Then I nested another <button> inside. That is when I experienced the react warning <button> cannot appear as a descendant of <button> ....

warning: validatedomnesting(...): <button> cannot appear as a ...

Below is Console log Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>. In the DOM I can see the custom Button...

Warning: validateDOMNesting(...): <button> cannot appear as ...

Warning : validateDOMNesting(...): <button> cannot appear as a descendant of <button>. in button ... AR: [Reset the list] button has nested button. image.png....