I just launched a new course on ES6! Use the code WESBOS for $10 off.

Strengthen your core JavaScript skills and master all that ES6 has to offer. Start Now →

How to comment in React JSX

How do you comment in JSX? Regular JavaScript comments in JSX get parsed as Text and show up in your app.

Comments in JSX are weird and when searching for information, it’s hard to find a straightforward answer. So here it is:

You can’t just use HTML comments inside of JSX because it thinks they are real DOM Nodes:

render() {
  return (
    <div>
      <!-- This doesn't work! -->
    </div>
  )
}

You’ll need to use JavaScript comments inside of
You can use regular /* Block Comments */, but they need to be wrapped in curly braces:

{/* A JSX comment */}

Same goes for multiline comments:

{/* 
  Multi
  line
  comment
*/}  

Kind of a pain, but React devs has stated they do not plan to add regular JS commenting to JSX.

If you use Sublime Text, I’ve created a little snippet so you can just type jc + TAB to get a quick comment. Download it here. To install, PreferencesBrowse Packages → Put snippet in User folder.

I’m still on a hunt for a for a fix to get the comment shortcut working – or even a small package that would toggle them on and off. If anyone is a interesting in working on this (and knows Python) – let me know!

This entry was posted in JavaScript, Sublime Text. Bookmark the permalink.

30 Responses to How to comment in React JSX

  1. Connor says:

    Hey thank you for this. Very simple fix and the sublime plugin is great for the community also. Enjoyed your flexbox videos, going to check them out hardcore when bootstrap 4 stable launches

  2. Pablo says:

    Nice!!! just wat I needed

  3. Hey Wes, thanks for the snippet 🙂

    I used the scope meta.jsx.js to bind my comment-shortcut to your snippet only in that particular scope. Now it almost feels like the comment-shortcut is properly working in jsx 🙂

    “` Key Bindings – User

    //all other scopes, default comment toggle shortcut
    { “keys”: [“ctrl+shift+7”], “command”: “toggle_comment”, “args”: { “block”: false } },

    //only in meta.jsx.js insert snippet
    { “keys”: [“ctrl+shift+7”], “command”: “insert_snippet”, “args”: {“name”: “Packages/User/Snippets/jsx-comment.sublime-snippet”},

    “context”:
    [
    { “key”: “selector”, “operator”: “equal”, “operand”: “meta.jsx.js”, “match_all”: true }
    ]
    },

    “`

    Still seems a little complicated and has minor drawbacks:
    – Does not comment the whole line if nothing is selected
    – Is only working after the first opening html element. (since the scope is meta.jsx.js from there)
    – No toggling

  4. Bill says:

    Thanks!!

  5. Jack Rimell says:

    The docBlockr package for sublime supports a quick comment solution.

    Just type /* and press enter and it adds the ending comment tag and puts your caret in the correct place.

  6. Tom says:

    Thanks for this!!

  7. Rowland says:

    Thanks Wesbos

  8. NIc says:

    I accedently stumbled on a built in command :

    opt + cmd + /

    Creates a JSX comment with the cursor in the right place,

    maybe it was from a babel package i downloaded for syntax highlighting though.. but its worth giving it a try

  9. Jesse says:

    found a way to insert the snippets and allow it to wrap a selection, and insert it before having any HTML element:

    “`
    {
    “keys”: [“super+forward_slash”],
    “command”: “insert_snippet”,
    “args”: {
    “name”: “Packages/User/Snippets/jsx-comment.sublime-snippet”,
    “block”: true
    },
    “context”: [
    {
    “key”: “selector”,
    “operator”: “equal”,
    “operand”: “meta.jsx.js, meta.group.braces.round.js”,
    “match_all”: true
    }
    ]
    }
    “`

    and also need to modify the snippets:

    “`


    jc
    source.js

    “`

  10. Vyacheslav says:

    Thank you, very helpful!

  11. Tobias says:

    Actually, I can comment with “//Hello” and the {*/ Hello */} gives me an error. So have this been updated lately?

  12. Aramis S. H. Fernandes says:

    Very helpful. Thanks a lot!

  13. If you’re still looking… You can use CTRL+/. Here’s a multiline macro [link 1] bound to the normal comment keys (CTRL+/) [link2]

    [https://raw.githubusercontent.com/mcissel/st3-user-package/29352fde17a5b5ff7771bde6caa2942f46c20a38/jsx-comment-lines.sublime-macro]

    [https://raw.githubusercontent.com/mcissel/st3-user-package/29352fde17a5b5ff7771bde6caa2942f46c20a38/jsx-comment-lines.sublime-macro]

    • oops, the keybinding to use is here: [https://github.com/mcissel/st3-user-package/blob/aba5f17e538bc03509c33d66028f8a5675118443/Default%20(Windows).sublime-keymap#L38]

  14. Rane says:

    Thanks. This helped me a lot.

  15. bags says:

    Hello, I think your site might be having browser compatibility issues.

    When I look at your website in Opera, it looks
    fine but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other
    then that, amazing blog!

  16. Thank you, will much useful to me

  17. campina says:

    After looking over a handful of the blog posts on your website, I really like
    your way of blogging. I added it to my bookmark site list and will be checking back
    soon. Take a look at my web site as well and tell me your opinion.

  18. Miguel says:

    nice! thanks

  19. Omar says:

    Thank you!!!!

  20. Kamran khan says:

    #Wawo

    #Ameeezing

    #OSM

    #LOVELY

    #CUTE

    #Cool

    #POST.

  21. Kamran khan says:

    Nice Post yara

    Kamal k post karty hain ap
    Wah g wah man gye apko

  22. Xavier Artot says:

    Snippet comment for Vim and UltniSnipet

    snippet rc
    {/* ${1:JSX Comment} */}

  23. Toby says:

    Adding to this, if anyone want to write a comment inside an multiline element literal, you have to do this:

Leave a Reply

Your email address will not be published. Required fields are marked *