Semantic-ui-react: Warning: <a> cannot appear as a descendant of <a>

[darky]

Bug Report

<Menu>
  <Menu.Item>
    <Menu.Header>Header</Menu.Header>
    <Menu.Menu>
      <Menu.Item>
        Child item
      </Menu.Item>
    </Menu.Menu>
  </Menu.Item>
</Menu>

generate:

<div class='ui menu'>
  <a class='item'>
    <div class='header'>Header</div>
    <div class='menu'>
      <a class='item'>Child item</a>
    </div>
  </a>
</div>

Which cause warning on React 16:
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

Expected Result

No warning

Actual Result

Warning

Version

0.78.3

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

The JSX above will produce:

<div class="ui menu">
  <div class="item">
    <div class="header">Header</div>
    <div class="menu">
      <div class="item">Child item</div>
    </div>
  </div>
</div>

---

A Menu.Item becomes the a tag automaticaly when you're passing onClick or href props. If you need this behaviour, just manually pass an as prop.

<Menu.Item as='div' href='/foo' />

md5-02f462ab47969c6d98eff7f6fcfd9e1f

[Neo-Ryo]

Nice bug report and nice debug response, thank u both!