# How to Comment in React, JSX, and TSX

> Learn how to write comments in React, JSX, and TSX, including single-line comments, multi-line comments, and how to comment out JSX blocks correctly.

- Canonical URL: https://marcelocarmona.com/how-to-comment-in-react-jsx
- Language: English (en-US)
- Published: 2016-10-06
- Updated: 2026-04-26
- Tags: React, Javascript, Typescript
- Other languages: [Espanol](https://marcelocarmona.com/es/comentarios-en-jsx)

---

If you searched for `react comment`, `jsx comments`, `reactjs comment`, or `how to comment in TSX`, the answer is the same: inside JSX or TSX you need to use JavaScript comments wrapped in curly braces.

## How to comment in React JSX

It is not possible to use HTML comments inside JSX because JSX is JavaScript syntax that compiles to JavaScript function calls.

```jsx
function Example() {
  return (
    <div>
      <!-- This does not work -->
      <p>Hello</p>
    </div>
  )
}
```

To write a React comment inside JSX, use a JavaScript block comment inside curly braces:

```jsx
function Example() {
  return (
    <div>
      {/* This works */}
      <p>Hello</p>
    </div>
  )
}
```

## Single-line JSX comments

Use the same syntax even for a single-line JSX comment:

```jsx
return (
  <section>
    {/* Rendered only when the user is logged in */}
    <Dashboard />
  </section>
)
```

## Multi-line React comments

React comments can also span multiple lines:

```jsx
return (
  <section>
    {/*
      Explain why this branch exists,
      or temporarily describe the UI below.
    */}
    <Dashboard />
  </section>
)
```

## How to comment out React code

If you want to comment out React code or temporarily disable a component, wrap the JSX in a comment:

```jsx
return (
  <main>
    {/* <Sidebar /> */}
    <Content />
  </main>
)
```

For a larger block:

```jsx
return (
  <main>
    {/*
    <Sidebar />
    <Filters />
    <Recommendations />
    */}
    <Content />
  </main>
)
```

## How to comment in TSX

TSX uses the same comment syntax as JSX. If you are writing React with TypeScript, use curly braces plus a JavaScript block comment:

```tsx
type Props = {
  title: string
}

export function Header({ title }: Props) {
  return (
    <header>
      {/* TSX comment */}
      <h1>{title}</h1>
    </header>
  )
}
```

## Common mistakes

The most common mistake is trying to use HTML comments inside JSX:

```html
<!-- Wrong inside JSX -->
```

Another common mistake is trying to use `//` directly inside JSX markup:

```jsx
return (
  <div>
    // Wrong inside JSX
    <p>Hello</p>
  </div>
)
```

`//` works in regular JavaScript outside the returned JSX, but not directly inside the markup:

```jsx
// This is fine
const title = 'Hello'

return <h1>{title}</h1>
```

## Quick answer

- React comments inside JSX: `{/* comment */}`
- JSX comments: `{/* comment */}`
- TSX comments: `{/* comment */}`
- Comment out React code: `{/* <Component /> */}`

## Related React articles

- [How to Avoid Unnecessary Re-renders with React.memo](/avoid-unnecessary-re-renders-react-memo)
- [Understanding React Suspense](/understanding-react-suspense)

---

Site entrypoint for agents: [llms.txt](https://marcelocarmona.com/llms.txt) · [llms-full.txt](https://marcelocarmona.com/llms-full.txt) · [ai-index.json](https://marcelocarmona.com/ai-index.json) · [sitemap.xml](https://marcelocarmona.com/sitemap.xml)

Every HTML page on this site also serves this Markdown representation via
`Accept: text/markdown`, or by appending `.md` to the URL.