0

I'm making a UI like that in visual studio code for file explorer where the whole thing is a button that toggles the file explorer, and inside of that button, there are other buttons such as that to create a new file or new folder.

enter image description here

The problem is that in reactJS I get the following error when nesting button element inside another button element. And it looks like that's allowed in HTML. So, what's the correct way?

Warning: validateDOMNesting(...): cannot appear as a descendant of .

Menas
  • 1,059
  • 1
  • 9
  • 19
  • 2
    This is not a `React.js` issue - the warning you're getting is related to how you're structuring your `HTML`. Buttons inside of a button are **not** valid, so you should use an alternative. https://stackoverflow.com/questions/39386497/can-i-nest-button-inside-another-button – goto Aug 06 '20 at 11:39
  • 1
    @goto1 is correct, and as you are not using a button for styling or submitting a form there is really no reason to use a button. If you want the accessibility that comes default by using a button tag, attach the correct ARIA tags (i.e. [Role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role)) – Jacob Smit Aug 06 '20 at 11:43
  • @goto1 I saw this other question. I'm aware it's not a react.js issue it's just that React is what detects the issue. – Menas Aug 06 '20 at 12:06
  • @JacobSmit I see! So, it can't and shouldn't be a button? Can you post that as an answer, please? – Menas Aug 06 '20 at 12:08

0 Answers0