title: There are any ways of suppressing single validateDOMNesting warning in React?
body: <p>In my case I have something like this:</p>
  <pre><code>
  &lt;div className=&quot;projects&quot;&gt;
    {getProjectList().map(p =&gt; (
      &lt;Link key={p.id} 
            className='project' 
            to={`/project/${p.id}`} 
            style={{border: '2px solid red'}}
      &gt;
          #{p.id} - {p.name}
          &lt;div className=&quot;helpers&quot;&gt;
            &lt;Button
              icon=&quot;trash&quot;
              size=&quot;mini&quot;
              color=&quot;red&quot;
              onClick={e =&gt; {
                e.preventDefault();
                e.stopPropagation();
                setDeleting(p);
              }}
            /&gt;
            &lt;Button
              size=&quot;mini&quot;
              color=&quot;red&quot;
              as={Link}
              to={`/edit/${p.id}`}
            &gt;Edit&lt;/Button&gt;
          &lt;/div&gt;
      &lt;/Link&gt;
    ))}
  &lt;/div&gt;
  </code></pre>
  <p>which visually is represented like this:</p>
  <p><a href="https://i.stack.imgur.com/CTLGE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CTLGE.png" alt="enter image description here" /></a></p>
  <p>And I would prefer to keep it like this because it works as it is intended.</p>
  <p>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 &quot;Open Link in New Tab&quot;. To navigate to details of the projects and also navigate to edit form to change properties of the project (These are two different pages).</p>
  <p>But in this case I have two times  tag embedded in each other and React generate:</p>
  <pre><code>Warning: validateDOMNesting(...): &lt;a&gt; cannot appear as a descendant of &lt;a&gt;.
  </code></pre>
  <p>any ways to suppress it?</p>