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?

score 33 · Accepted Answer · edited Mar 16 '20 at 05:05

33

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.

edited Mar 16 '20 at 05:05

John Doe

3
2

answered Jul 05 '18 at 04:25

apollo

2,467
1
20
29

3

Not sure why this isn't marked as the correct answer, this is how you do comments inside jsx tags. – Matt Crampton Feb 11 '19 at 17:02
1

A single line comment (`//`) is also possible. – Putzi San Feb 11 '20 at 08:56

score 7 · Answer 2 · answered May 09 '17 at 16:36

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.

Note that @apollo's answer below is now the correct one. – Dave Jul 09 '19 at 02:36 — Dave, Jul 09 '19 at 02:36

Andrew Li · Answer 3 · 2017-05-09T16:32:23.860

2

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.

edited May 09 '17 at 16:32

answered May 09 '17 at 16:28

Andrew Li

55,805
14
125
143

So long story short, it's impossible to add any sort of comment inside a JSX tag? In other words, there's no alternate syntax that will work for props? – machineghost May 09 '17 at 16:31
1

@machineghost Nope, at least not that I know of. JSX tags only support valid keys and values as props or deconstructed objects, nothing more. – Andrew Li May 09 '17 at 16:33
@machineghost Anyways, I would actually prefer commenting at the top than inside the props even if you could - it would be easier to read IMO. You could always mock props and set a useless prop for the comment but I would do it at the top. – Andrew Li May 09 '17 at 16:38

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

3 Answers3