Common JSX Pitfalls

A component can compile without a single error and still put nothing useful on the screen. The two mistakes in this lesson both behave that way: the build succeeds, the page loads, and the output is missing or wrong. Knowing what each one looks like saves time when a page shows less than you expected.

Both mistakes involve components. As the previous lesson showed, a component is a function that returns JSX, and you use it in other JSX as if it were a tag, for example <Welcome />. The Components chapter explains them in detail.

Lowercase Component Names

JSX tag names are case-sensitive, and React uses the first letter to decide what a tag means. A tag that starts with a lowercase letter, such as <div> or <h1>, is treated as an HTML element. A tag that starts with an uppercase letter, such as <Welcome>, is treated as a component, and React calls the function with that name.

The following component has a lowercase name and is then used as a tag:

function welcome() {
  return <h1>Welcome</h1>;
}

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

React never calls the welcome function. It sees a lowercase tag, so it creates an HTML element named welcome, which browsers do not know. The page receives an empty, unknown element, and the console shows a warning during development:

The tag <welcome> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

<div><welcome></welcome></div>

The fix is to start the component's name with an uppercase letter, both where you define it and where you use it:

function Welcome() {
  return <h1>Welcome</h1>;
}

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

Now React calls Welcome and places its result in the page:

<div><h1>Welcome</h1></div>

A Missing Return Value

A component shows only what it returns. If the function returns nothing, React renders nothing for it, and it does not report an error, because returning nothing is allowed. Two common ways of writing a component lose the return value by accident.

The first involves arrow functions. An arrow function with a concise body, which has no curly braces after the arrow, returns its expression automatically. An arrow function with curly braces has a block body, and it returns nothing unless it contains a return statement. The following three components look similar, but they do not behave the same:

// Concise body: returns the heading
const Greeting1 = () =>
  <h1>Hello, World!</h1>;

// Concise body with parentheses: returns the heading
const Greeting2 = () => (
  <h1>Hello, World!</h1>
);

// Block body without return: returns undefined
const Greeting3 = () => { <h1>Hello, World!</h1> };

Rendering each of them gives this output:

Greeting1  <h1>Hello, World!</h1>
Greeting2  <h1>Hello, World!</h1>
Greeting3  (nothing)

Greeting1 and Greeting2 are both correct; the parentheses in Greeting2 only make the returned markup easier to see when it spans several lines. Greeting3 creates the heading and then discards it, because the block body has no return statement. To fix it, either remove the curly braces or write return inside them: const Greeting3 = () => { return <h1>Hello, World!</h1>; };.

The second way involves the return statement itself. JavaScript inserts a semicolon automatically at the end of a line that contains only return. In the following component, the function therefore returns undefined, and the JSX on the next line never runs:

function Greeting() {
  return
    <h1>Hello, World!</h1>;
}

This component also renders nothing. The fix is to start the JSX on the same line as return, and the usual way to do that for markup that spans several lines is to open a parenthesis right after the keyword:

function Greeting() {
  return (
    <h1>Hello, World!</h1>
  );
}

The opening parenthesis tells JavaScript that the expression continues, so the heading is returned and appears in the page. This is the reason most React code wraps multi-line JSX in parentheses after return.