Hey there, I’ve taken a look at your React code and immediately spotted the culprit behind that frustrating syntax error!

The issue isn’t with your <a> tag at all — it’s the </br> line you’ve added inside the <a> element. In JSX (and proper HTML5), the line break tag is a self-closing tag, not a closing tag without an opening one. Writing </br> confuses the JSX parser, making it think there’s an unclosed tag floating around, which then throws off its ability to correctly parse the surrounding <a> tag structure.

The Fix #

Simply replace the invalid </br> with the correct self-closing line break tag <br /> (or <br> — JSX allows omitting the trailing slash for self-closing tags, but <br /> is more aligned with strict HTML standards).

Corrected Code #

function App() {
  return (
    <div className="App">
      <table>
        <tr>
          <td><img className='mainlogo' src='logoWAH.png' alt='logo' width='150px' height='auto'/></td>
          <td align="right">
            <table style='text-align:right;width:80%'>
              <tr>
                <td>
                  <a className='nav-item' href='#'>
                    <span className='nav-img'>
                      <img src='image/contact.png' alt='contact' width='20px' height='20px'/>
                    </span>
                    <br />
                    <span className='contact'>Contact us 24/7</span>
                  </a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
  );
}
export default App;

Quick side note: I also replaced all instances of class with className — that’s another JSX requirement, since class is a reserved keyword in JavaScript. This won’t cause an error right now, but it’s best practice to fix it to avoid styling issues later!

内容的提问来源于stack exchange，提问作者MaaHii