Why can't I have a JSX comment inside an element tag?

Question

I'm following the common pattern of breaking multi-attribute tags on to multiple lines, eg.

<div
  className="foo"
  style={{ fontWeight: "bold" }}
/>

I would like to add a comment inside that declaration, eg.

<div
  className="foo"
  {/* This is only temporary */}
  style={{ fontWeight: "bold" }}
/>

However the above syntax doesn't work; I get:

SyntaxError: Unexpected token, expected ... (45:96)

(pointing to the closing } in temporary */}.) Is it possible to add a comment inside a tag in JSX, and if so what syntax should I use?

Answer 1

You can comment inside JSX tags like so:

<div   className="foo"   /* This is only temporary */   style={{ fontWeight: "bold" }} /> 

Note: there are no "{" and "}"

a live example in JSFiddle

I remember read this in the official document few years ago, but after they rewrite the document, I can't find it anymore.

Answer 2

The short answer is "you can't", but there are various ways to fake it. The simplest, I think, is to piggy-back on another value:

<img
  alt={"settings link"
  /* This is just temporary */}
  src="http://www.example.com/foo.jpg"
/>

It's a bit less than optimally clear, but all we've done is moved the brace up one line. That converts the "settings link" from a HTML-esque JSX value to a Javascript expression, which just happens to have a comment.

It does have the advantage that it ties the comment to the individual attribute, rather than the tag as a whole. I think that's clearer; if you really wanted to comment on the tag you'd do better to move it to the top.

If your goal was to comment out some attribute, yeah, that's a little obscure. But it should be clear enough to un-comment when you get around to it.

Answer 3

I think you're confusing props and children. When you do:

<div
  className="foo"
  {/* bar */}
>

You are attempting to use an inline JSX expression as if you were passing props inside the opening tag, this is NOT allowed. When you have an element, the opening tag can only contain deconstructed objects or prop=value values hence the reason it expects ... to deconstruct an object with props and values, for example:

const props = {
    className: "foo"
}

<div {...props}>

You can't comment inside the tag because the tag doesn't allow for inline JSX expressions. JSX expressions are only allowed as children:

{/* bar */}
<div
  className="foo"
>

In this example, the expression is not inside the opening tag of an element and allowed.