3

Constantly while testing, I get these extremely tall and hideous errors saying something like this: Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. They flood my console and make it hard to differentiate other errors that I actually care about.

These checks are apparently non-configurable (based on the pages and pages of closed issues asking for an option to change them) so I would just like to turn them off. As React does not accept feature requests, support requests or questions at all, I was directed to ask the question here instead. (Please correct me if Stack Overflow is not the right place to ask this)

My use-case for this is rendering a Markdown description inside of a clickable tile. Since the tile is clickable and leads to a different route, it is a link. But, since some descriptions also have links in them, React gets really mad and throws giant errors in console.

I have read an answer here that said nesting anchor elements is forbidden in HTML - in this case, I simply don't care, as that is literally what it means to allow links in Markdown rendered inside another link.

Dev
  • 152
  • 1
  • 9
  • I'd love to find a solution to this problem as well. In my case, we have many components rendering divs inside of our table. Some are avoidable (MUI v4 Boxes, MUI v4 Grids), and some are not avoidable (MUI v4 Circular Progress). I would love to be able to suppress these errors. – Liran H Dec 09 '21 at 09:36

1 Answers1

0

What about overlaying your link instead of wrapping it around the other HTML?

Something like:

.container {
  position: relative;
}

.link {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transition: 1s background-color;
}

.link:hover {
  background-color: rgba(0, 0, 200, 0.2);
}
<div class=container>
  <a class=link href="goes-somewhere"></a>
  <div class=markdown>
    <h1>My markdown</h1>
    <a class=some-other-link href="goes-somewhere-else">this one is in the document</a>
  </div>
</div>
casr
  • 1,166
  • 2
  • 11
  • 17
  • ~~The size of the containing element depends on the Markdown content inside. There's a line clamp on it, but lines can be different heights. Thanks though~~ Whoops, misread your answer. You're saying make the clickable tile just an invisible link that is overlaid on top of everything else? – Dev Jul 31 '21 at 13:42
  • In your question, you state that you want a 'clickable tile' that wraps the HTML generated from the Markdown. In my answer, that tile would be the link that 'goes-somwhere'. It just expands its size to that of the container. The container's size is that of the Markdown content. – casr Jul 31 '21 at 13:49
  • In my question I state I already *have* a clickable tile that contains Markdown content. The issue is that React sees links in the Markdown and screams and cries like a little baby and floods my console so I can't see any other errors. I could remove links from the Markdown, move the tile, or just disable my console being flooded. Although it doesn't seem like I'm going to get a straight answer about that last one. – Dev Jul 31 '21 at 13:51