Common JSX Mistakes Beginners Make (and How to Avoid Them)

Common JSX Mistakes Beginners Make (and How to Avoid Them)

JSX looks familiar, which is why beginners make the same mistakes repeatedly. Here are the most common ones and how to avoid them.

Using class Instead of className

JSX is JavaScript, so class is a reserved word. Use className for the HTML class attribute and htmlFor for the for attribute.

Forgetting to Close Tags

In HTML, some tags like <img> are self-closing by convention. In JSX, every tag must be closed, either with a closing tag or as a self-closing tag with a slash.

Using Statements Instead of Expressions

You cannot put an if statement inside JSX curly braces. Use a ternary for conditions, or compute the value before the return statement.

Returning Multiple Root Elements

A component must return a single root. Returning sibling elements without a wrapper throws an error. Use a fragment to return siblings without an extra DOM node.

Using style as a String

In HTML, style is a string. In JSX, the style attribute takes an object with camelCased property names, like backgroundColor, not background-color.

Keys in Lists

When mapping arrays to elements, every item needs a unique key. Forgetting keys or using the array index causes subtle bugs when the list changes.

Conditional Rendering With &&

A common bug is rendering 0 or an empty string because && returns the left operand when it is falsy. Be explicit about what you want to render in each branch.

The Takeaway

Most JSX errors come from treating it like HTML. Remember it is JavaScript: close all tags, use camelCase, use expressions only, and always provide keys in lists.