How to Debug JSX in React

Debugging JSX in React can be challenging because it blends HTML-like syntax with JavaScript. This article provides a straightforward guide on how to identify and fix JSX errors using browser developer tools, React Developer Tools, inline console logs, and standard debugging practices.

1. Fix Compile-Time Syntax Errors

Before JSX can run in the browser, a build tool (like Babel, Vite, or Webpack) must compile it into standard JavaScript. If you have syntax errors, your application will fail to compile. Common JSX syntax errors include:

• Unclosed tags: Every JSX element must be explicitly closed (e.g., <br /> instead of <br>).
• No enclosing parent tag: JSX must return a single root element. If you have multiple top-level elements, wrap them in a React Fragment (<> ... </>).
• Incorrect attribute names: JSX uses camelCase for attributes instead of standard HTML naming (e.g., className instead of class, and htmlFor instead of for).

Check your terminal or the browser’s error overlay for detailed messages pinpointing the exact line number of these compilation failures.

2. Use React Developer Tools

The React Developer Tools browser extension is essential for debugging JSX. Once installed:

1. Open your browser’s Developer Tools and navigate to the Components tab.
2. Select any component in the tree to inspect its rendered JSX structure.
3. View and temporarily edit the current props and state in the right-hand panel to see how the UI reacts in real-time.

3. Insert Console Logs Directly Inside JSX

While you cannot write standard JavaScript statements inside JSX, you can execute expressions within curly braces {}. This allows you to log variables directly within your markup to verify their values during the render cycle:

return (
  <div>
    <h1>{user.name}</h1>
    {console.log('Current user data:', user)}
  </div>
);

4. Pause Execution with the Debugger

To inspect your variables right before the JSX is rendered, place a debugger statement or set a browser breakpoint immediately before your component’s return statement:

const MyComponent = ({ data }) => {
  debugger; // The browser will pause execution here if DevTools is open
  return <div>{data.title}</div>;
};

Once paused, you can step through the code and hover over variables in your source tool to inspect their current values.

5. Prevent Runtime Null and Undefined Errors

A frequent cause of runtime JSX crashes is trying to access properties of null or undefined (e.g., Cannot read properties of undefined). Use optional chaining (?.) or logical AND (&&) operators to prevent these crashes in your markup:

// Safe rendering with optional chaining
<p>{user?.profile?.bio}</p>

// Safe rendering with conditional evaluation
{items.length > 0 && <ItemList items={items} />}