React Comments

Comments are used in JavaScript to explain code, leave notes for developers, or temporarily disable code.

Because JSX is written inside JavaScript, comments in JSX use a slightly different syntax from ordinary HTML comments.

For example, this is a JSX comment:

{/* This is a JSX comment */}

The comment is placed inside curly braces because JSX uses JavaScript expressions within {}.

Comments are ignored when the application is rendered, so users do not see them as part of the visible interface.

Why Use Comments in JSX?

Comments can make React code easier to understand, especially when a component contains multiple sections or complex logic.

For example:

function App() {
  return (
    <div>
      {/* Main heading */}
      <h1>React Course</h1>

      {/* Course description */}
      <p>Learn React from beginner to advanced.</p>
    </div>
  );
}

The comments explain the purpose of different sections without changing what appears in the browser.

Comments can be particularly useful for:

• Explaining complex JSX
• Identifying major UI sections
• Explaining unusual logic
• Leaving development notes
• Temporarily disabling JSX
• Helping other developers understand the code

Basic JSX Comment Syntax

The standard JSX comment syntax is:

{/* Your comment here */}

For example:

function App() {
  return (
    <div>
      {/* Welcome message */}
      <h1>Welcome to React</h1>
    </div>
  );
}

The structure is:

{ /* comment */ }
  ↑      ↑
JSX     JavaScript
expression

The {} allow JavaScript syntax inside JSX, while /* */ creates the JavaScript block comment.

JSX Comments Must Use Curly Braces

A common mistake is trying to write a JavaScript comment directly inside JSX.

Incorrect:

<div>
  // This is a heading
  <h1>Hello</h1>
</div>

This is not valid JSX syntax.

Correct:

<div>
  {/* This is a heading */}
  <h1>Hello</h1>
</div>

The curly braces are necessary because the comment is inside JSX markup.

Single-Line JSX Comments

For a short comment, you can use:

{/* Main navigation */}

For example:

function App() {
  return (
    <nav>
      {/* Navigation links */}
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  );
}

This is usually enough for simple UI sections.

Multi-Line JSX Comments

You can also write longer comments across multiple lines.

{/*
  This section contains
  the user's profile information.
*/}

For example:

function Profile() {
  return (
    <div>
      {/*
        Display the user's
        profile information.
      */}
      <h2>John</h2>
      <p>Frontend Developer</p>
    </div>
  );
}

Multi-line comments can be useful when you need to explain something more complex.

However, comments should still be concise and meaningful.

JavaScript Comments Outside JSX

Inside the JavaScript portion of a React component, you can use normal JavaScript comments.

Single-line:

// User information
const name = "John";

Multi-line:

/*
  Calculate the total
  before rendering.
*/
const total = price * quantity;

These are different from comments written inside JSX.

For example:

function App() {
  // JavaScript comment
  const name = "John";

  return (
    <div>
      {/* JSX comment */}
      <h1>{name}</h1>
    </div>
  );
}

Both types can exist in the same component.

JavaScript Comments vs JSX Comments

The main difference is where the comment appears.

Location	Syntax
JavaScript code	// comment
JavaScript multiline	/* comment */
Inside JSX	{/* comment */}

For example:

function App() {
  // JavaScript comment
  const name = "John";

  return (
    <div>
      {/* JSX comment */}
      <h1>{name}</h1>
    </div>
  );
}

Understanding this difference prevents syntax errors.

HTML Comments Do Not Work the Same Way

HTML uses:

<!-- This is an HTML comment -->

You should not use this syntax directly inside JSX:

<div>
  <!-- This is not the correct JSX syntax -->
  <h1>Hello</h1>
</div>

Instead, use:

<div>
  {/* This is the correct JSX syntax */}
  <h1>Hello</h1>
</div>

JSX uses JavaScript comment syntax inside curly braces.

Commenting a JSX Element

Comments can be useful when temporarily disabling part of a component.

Suppose you have:

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <p>Description</p>
      <button>Continue</button>
    </div>
  );
}

You can temporarily comment out the button:

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <p>Description</p>

      {/*
      <button>Continue</button>
      */}
    </div>
  );
}

React will not render the commented-out button.

This can be useful during development.

Commenting Multiple JSX Elements

You can temporarily disable a larger section:

{/*
<div className="sidebar">
  <h2>Categories</h2>
  <ul>
    <li>React</li>
    <li>JavaScript</li>
  </ul>
</div>
*/}

The entire section is treated as a comment.

This can be useful when testing different versions of a UI.

However, comments should not be used as a permanent substitute for removing unused code.

Comments Between JSX Elements

You can place comments between elements.

return (
  <div>
    <header>
      <h1>My Website</h1>
    </header>

    {/* Main content starts here */}

    <main>
      <p>Welcome to my website.</p>
    </main>

    {/* Footer starts here */}

    <footer>
      <p>Copyright 2026</p>
    </footer>
  </div>
);

This can make large JSX structures easier to navigate.

Comments Inside Conditional JSX

Comments can also be placed near conditional content.

return (
  <div>
    {/* Show this message only for logged-in users */}
    {isLoggedIn && (
      <p>Welcome back!</p>
    )}
  </div>
);

This is especially useful when the condition is not immediately obvious.

Comments Inside Lists

Comments can be used when rendering arrays.

<ul>
  {/* Render every product */}
  {products.map((product) => (
    <li key={product.id}>
      {product.name}
    </li>
  ))}
</ul>

You can explain what the list represents without affecting the rendered output.

Comments Around Components

Comments are useful for identifying major React components inside a page.

function App() {
  return (
    <div>
      {/* Website header */}
      <Header />

      {/* Main page content */}
      <MainContent />

      {/* Website footer */}
      <Footer />
    </div>
  );
}

This can make a component tree easier to understand.

Comments in JSX Attributes

Comments cannot be placed inside an attribute value.

For example, this is not valid:

<button
  className="button" {/* Button style */}
>
  Click Me
</button>

Instead, place the comment before the element:

{/* Button style */}
<button className="button">
  Click Me
</button>

Or explain the attribute in a nearby comment.

Comments and JavaScript Expressions

Remember that JSX curly braces can contain JavaScript expressions.

For comments, the pattern is:

{/* comment */}

Not:

// comment

and not:

/* comment */

inside JSX markup.

The correct syntax combines:

{   JavaScript expression   }
    /* comment */

Comments Do Not Appear in the UI

Comments are for developers and do not become visible text in the rendered interface.

For example:

return (
  <div>
    {/* This text is only for developers */}
    <h1>Hello React</h1>
  </div>
);

The browser displays:

Hello React

The comment is not displayed as part of the UI.

You should still remember that comments are part of the source code and may be included in the application’s generated HTML or JavaScript output depending on the build process and tooling. Therefore, do not put passwords, API keys, private information, or secrets inside comments.

Writing Useful JSX Comments

Good comments explain why something exists when the code itself does not make the reason obvious.

For example:

{/* Hide the navigation on mobile screens */}
<MobileNavigation />

A less useful comment would simply repeat the code:

{/* Render MobileNavigation */}
<MobileNavigation />

The second comment provides little additional information.

A useful rule is:

Write comments that add context, not comments that simply describe obvious code.

Avoid Excessive Comments

Not every JSX element needs a comment.

Avoid:

{/* Heading */}
<h1>Hello</h1>

{/* Paragraph */}
<p>Welcome to React.</p>

{/* Button */}
<button>Continue</button>

If the code is already obvious, these comments add unnecessary noise.

Instead, use comments where they provide useful context:

{/* Display the upgrade button only for premium users */}
{isPremium && (
  <button>Upgrade</button>
)}

The comment explains something that may not be immediately obvious.

Comments for Temporary Development Notes

During development, comments can be used to leave temporary notes.

{/* TODO: Add loading state here */}

Or:

{/* TODO: Replace placeholder image with API image */}

These comments can remind you about unfinished work.

Once the task is completed, remove outdated comments.

A Complete JSX Comments Example

Here is a component containing different types of useful comments:

function Dashboard() {
  // User information
  const userName = "John";
  const isAdmin = true;

  return (
    <div className="dashboard">

      {/* Dashboard header */}
      <header>
        <h1>Welcome, {userName}</h1>
      </header>

      {/* Main dashboard content */}
      <main>
        <p>Here is your dashboard.</p>

        {/* Show admin controls only to administrators */}
        {isAdmin && (
          <section>
            <h2>Admin Controls</h2>
            <button>Manage Users</button>
          </section>
        )}
      </main>

      {/* TODO: Add notifications section */}
    </div>
  );
}

This example demonstrates both JavaScript comments and JSX comments.

The comments help explain the structure and purpose of different parts of the component without changing the UI.

Common Mistakes

Using HTML Comments

Incorrect:

<!-- Comment -->

Correct:

{/* Comment */}

Using JavaScript Line Comments Directly Inside JSX

Incorrect:

<div>
  // Comment
  <h1>Hello</h1>
</div>

Correct:

<div>
  {/* Comment */}
  <h1>Hello</h1>
</div>

Forgetting the Curly Braces

Incorrect:

/* Comment */

Correct inside JSX:

{/* Comment */}

Putting Comments Inside Attributes

Incorrect:

<button
  className="primary"
  {/* Comment */}
>

Instead:

{/* Primary action button */}
<button className="primary">
  Continue
</button>

Leaving Sensitive Information in Comments

Never write secrets such as:

// API key: abc123...

Comments are not a secure place to store sensitive information.

JSX Comments Cheat Sheet

Situation	Syntax
JSX single-line comment	{/* Comment */}
JSX multi-line comment	{/* Multi-line comment */}
JavaScript single-line comment	// Comment
JavaScript multi-line comment	/* Comment */
HTML comment	<!-- Comment -->
Temporarily disable JSX	{/* <Component /> */}

The most important distinction is:

// JavaScript code area

return (
  <div>
    {/* JSX code area */}
  </div>
);

Where to Place an Image

Image Placement: After “JavaScript Comments vs JSX Comments”

Create a 16:9 React infographic comparing the three comment syntaxes:

JavaScript
// comment
/* comment */

        VS

JSX
{/* comment */}

        VS

HTML
<!-- comment -->

Highlight {/* comment */} as the correct syntax when writing comments inside JSX.

Caption:
JSX uses JavaScript block comments wrapped in curly braces.

Alt text:
React JSX comments infographic comparing JavaScript, JSX, and HTML comment syntax.

Practice Exercise

Create a Dashboard component with:

const user = {
  name: "Alex",
  isAdmin: true
};

Build a simple dashboard containing:

• A header
• A welcome message
• A main content section
• An admin section that appears only when isAdmin is true
• A footer

Add meaningful JSX comments to identify each major section.

For example:

{/* Dashboard header */}

Also add a temporary TODO comment:

{/* TODO: Add notifications */}

Then practice commenting out the admin section temporarily without deleting the JSX.

Key Takeaways

JSX comments are simple once you remember their special syntax.

Remember:

• JSX comments use {/* ... */}.
• HTML comments use <!-- ... --> and should not be used directly in JSX.
• JavaScript comments use // or /* ... */ outside JSX markup.
• Curly braces are required when placing a comment inside JSX.
• Comments can explain UI sections, complex logic, and development notes.
• JSX comments can temporarily disable elements or sections.
• Comments do not appear as visible UI content.
• Avoid unnecessary comments that simply repeat what the code already says.
• Use comments to explain context or reasoning when it is useful.
• Never put passwords, API keys, or other secrets in comments.

The syntax to remember is:

{/* Your JSX comment here */}

Once JSX comments are clear, the next step is JSX Attributes, where you’ll learn how to control element properties such as src, alt, id, className, disabled, and dynamic attributes.