title: React site warning: The href attribute requires a valid address. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid
body: <p>I am getting a warning on a React site I built</p>
  <pre><code>./src/components/layout/Navbar.js [1]   Line 31:  The href attribute requires a valid 
  address. Provide a valid, navigable address as the href value  jsx-a11y/anchor-is-valid
  </code></pre>
  <p>on the following code:</p>
  <pre><code>          &lt;p&gt;
              {isEmpty(profile.website) ? null : (
                &lt;a
                  className=&quot;text-white p-2&quot;
                  href={profile.website}
                  target=&quot;#&quot;
                &gt;
                  &lt;i className=&quot;fas fa-globe fa-2x&quot; /&gt;
                &lt;/a&gt;
              )}
              {isEmpty(profile.social &amp;&amp; profile.social.twitter) ? null : (
                &lt;a
                  className=&quot;text-white p-2&quot;
                  href={profile.social.twitter}
                  target=&quot;#&quot;
                &gt;
                  &lt;i className=&quot;fab fa-twitter fa-2x&quot; /&gt;
                &lt;/a&gt;
              )}
              {isEmpty(profile.social &amp;&amp; profile.social.facebook) ? null : (
                &lt;a
                  className=&quot;text-white p-2&quot;
                  href={profile.social.facebook}
                  target=&quot;#&quot;
                &gt;
                  &lt;i className=&quot;fab fa-facebook fa-2x&quot; /&gt;
                &lt;/a&gt;
              )}
            &lt;/p&gt;
  </code></pre>
  <p>Even though the warning appears only for the first link, the same warning occurs on the next link if I remove the first link temporarily or change the href of the first link to a static URL.</p>
  <p>The links need to appear as just an icon.</p>
  <p>I have tried things such as using a button (did not have the correct look), using a function to open the dynamic url, and trying to force the href to be a string by using <code>'' + {profile.website}</code>. Many other suggestions have not worked.</p>
  <p>Is there a way to prevent the error, without changing the jsx-a11y rules? Is what I have done not a good pattern, or is it just a bug in React or JSX?</p>