Despite the simplicity of JSX, there are some common mistakes that developers (especially beginners) make when working with it. In this lesson, we’ll explore these mistakes and provide solutions to help you avoid unnecessary frustration.

1. Mismatched Tag Names

JSX tag names are case-sensitive, which means React treats lowercase and uppercase tag names differently.

What does this mean?

• Lowercase tags (e.g., <div>, <p>, <span>) refer to built-in HTML elements.
• Uppercase tags (e.g., <App>, <Navbar>) refer to React components.

💡 Common Mistake:

When defining a component in JSX, always start the component name with an uppercase letter. If you use a lowercase name, React will assume it’s a built-in HTML tag and throw an error.

❌ Incorrect example:

Let's look at an incorrect way of using JSX tag names:

function app() {
  return <div>Welcome</div>;
}

The problem here, is that React expects custom components (in this case, app) to start with an uppercase letter (App, not app).

✅ Corrected version:

This is the correct way:

function App() {
  return <div>Welcome</div>;
}

Here, we renamed app to App to follow JSX’s case-sensitivity rules.

2. Forgotten Return Statement in Arrow Functions

If you're using an arrow function in a JSX component, remember that if you're returning JSX directly, you need to wrap the return statement with parentheses.

❌ Incorrect example:

Here is an incorrect return statement using arrow function:

const App = () => 
  <h1>Hello, World!</h1>;

This might lead to a syntax error because JavaScript will misinterpret the code.

✅ Corrected version:

This is the correct way:

const App = () => (
  <h1>Hello, World!</h1>
);

When return statements in arrow functions are written this way, the JSX is parsed correctly.