There are any ways of suppressing single validateDOMNesting warning in React?

Question

In my case I have something like this:


<div className="projects">
  {getProjectList().map(p => (
    <Link key={p.id} 
          className='project' 
          to={`/project/${p.id}`} 
          style={{border: '2px solid red'}}
    >
        #{p.id} - {p.name}
        <div className="helpers">
          <Button
            icon="trash"
            size="mini"
            color="red"
            onClick={e => {
              e.preventDefault();
              e.stopPropagation();
              setDeleting(p);
            }}
          />
          <Button
            size="mini"
            color="red"
            as={Link}
            to={`/edit/${p.id}`}
          >Edit</Button>
        </div>
    </Link>
  ))}
</div>

which visually is represented like this:

And I would prefer to keep it like this because it works as it is intended.

Additional explanation why I want it this way: I want to provide to user ability to click on both links with right mouse button and choose "Open Link in New Tab". To navigate to details of the projects and also navigate to edit form to change properties of the project (These are two different pages).

But in this case I have two times tag embedded in each other and React generate:

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

any ways to suppress it?

Does this answer your question? [validateDOMNesting warning React](https://stackoverflow.com/questions/47282998/validatedomnesting-warning-react) — Nja, Oct 12 '20 at 12:44
No, unfortunately no. @foobar user asked here "How seriously should I take this...?" I'm asking how to suppress the error because I know what I'm doing (I guess ;) - I hope there are any downsides I'm not aware of in this approach) but I want to get rid of the warning. — stopsopa, Oct 12 '20 at 12:48
Why not just move the buttons out of the link and position them using CSS? — Heretic Monkey, Oct 12 '20 at 12:48
True, That would do, but still, there are any ways of suppressing the warnings? Question is still valid. — stopsopa, Oct 12 '20 at 12:49
The downsides are that the HTML produced is invalid, and therefore less accessible to users who use assistive technologies like screen readers. "Question is still valid" sure, so is "how do I make my car stop beeping when I don't wear a seatbelt?" but can you understand why people who don't otherwise know how aren't willing to dig to find out? — Heretic Monkey, Oct 12 '20 at 12:56

score 0 · Answer 1 · answered Oct 28 '22 at 21:50

I'm working on rendering emails with React and ran into the same issue because it's recommended to exclude <tbody> for some Email Service Providers (link)

I wasn't able to suppress the error directly, instead, I added a __isTest prop to my component and then only added <tbody> when __isTest === true:

return __isTest ? (
  <table>
    <tbody>
      <tr>
       <td>{children}</td>
      </tr>
    </tbody>
  </table>
) : (
  <table>
    <tr>
      <td>{children}</td>
    </tr>
  </table>
)

I would definitely prefer to be able to suppress the warning, but this is an alternative that may work in certain cases.

score 0 · Answer 2 · answered Mar 22 '23 at 17:21

I'm working on a project where we use web-components, which throw this DOM validation off (maybe the DOM we're generating is not 100% as per the standard, because I don't know what it says about web-components, but it works). I haven't found a way to disable the checks, but I monkey-patched console.error to specifically skip them:

if (import.meta.env.DEV) { // vite env check
    function suppressNestingWarnings() {
        // sooth typescript
        type SilenceableConsole = typeof console & { warningsSilenced?: boolean };

        if (!import.meta.env.DEV) { // in case someone copies this around
            return;
        }

        if ((console as SilenceableConsole).warningsSilenced) {
            return;
        }

        const origConsoleError = console.error;
        console.error = (...args: unknown[]) => {
            const isNestingWarning = (arg: unknown) => typeof arg === "string" && arg.includes("validateDOMNesting");
            const concernsOurElements = (arg: unknown) => typeof arg === "string" && arg.includes("ourprefix-");
            const [formatString, child, parent] = args;
            if (isNestingWarning(formatString) && (concernsOurElements(child) || concernsOurElements(parent))) {
                return;
            }
            origConsoleError(...args);
        };

        (console as SilenceableConsole).warningsSilenced = true;
    }
    suppressNestingWarnings();
}

score -10 · Answer 3 · answered Oct 12 '20 at 13:03

-10

Just add /* eslint-disable */ in the file you want the warnings to be suppressed as explained in the official github repository how to hide unwanted warning.

Remember that's not best practice.

answered Oct 12 '20 at 13:03

Nja

439
6
17

The question is about runtime React warning, not compile-time ESLint warning – d9k Apr 30 '23 at 03:54

There are any ways of suppressing single validateDOMNesting warning in React?

3 Answers3